webpack基础 -- css相关处理

css的处理

相关loader :
1.style-loader(处理标签, 生成插入html) –> style-loader/url style-loader/useable
2.css-loader (处理js引入css)
安装: npm install style-loader css-loader –save-dev

准备页面:
app.js

import './css/base.css'
import './css/common.css'

base.css

html{
  background: blue;
}

common.css

body{
  color: #fff;
}

使用style-loader/useable 时 , 要改变app.js, 修改如下

import base from './css/base.css'
import common from './css/common.css'

base.use()
base.unuse()

var flag = false;
setInterval(function(){
  if(flag){
    base.use()
  }else{
    base.unuse();
  }
  flag = !flag;
},500)

对应的webpack.config.js 修改为:

{
    test:/\.css$/,
    use: [
      {loader:'style-loader/useable'}, // 通过条件判断是否使用指定的css
      {loader:'css-loader'} 
    ],
 }

配置options

style-loader的参数:

insertAt 插入位置
insertInto 插入到dom
singleton 是否只使用一个style标签
transform 转化, 浏览器环境下,插入页面前

{
        test:/\.css$/,
        use: [
          {
            loader:'style-loader',
            options:{
              insertInto:'#app',  // 打包的css插入到#app的底部
              singleton: true,  // 将多个css文件打包到一个style中
              transform:'./css.transform.js' // 在插入到html中时进行的css操作
            }
          },
          {loader:'css-loader'} // 通过style方式插入到html中

        ],
      }

css.transform.js

// 在浏览器中运行, 当style插入到dom中时执行
module.exports = function(css){
  // ... 其他的相关操作
  console.log(window.innerWidth)
  if(window.innerWidth > 500){
    return css.replace('blue','red')
  }else{
     return css.replace('blue','yellow')
  }
}

css-loader的参数

alias (解析的别名)
impotLoader (@import )
minimize (是否压缩) css-loader 版本^1没有效果
modules (启用css-modules css模块化) ”

css模块化的语法:

:local: 本地的样式
:global: 全局的样式
compose: 继承样式
compose … from path : 从一个文件中引入某一个样式