webpack css处理

需要用到 style-loader css-loader， 这种方法直接将css添加到head里面

module: {
        rules: [{
                test: /\.css$/,
                use:[{
                    loader:"style-loader"
                    }, {
                    loader: "css-loader",
                }]
            }]

正常js引入css

import './style/common.css';

####style-loader/url 将css已link的形式添加到head里面

{
    test: /\.css$/,
    use:[{
       loader:"style-loader/url"
        }, {
        loader: "file-loader"
    }]
}

同时注意需要将publicpath改下，不然引用不到打包后的css

output: {
        path: path.resolve(__dirname,"dist"),
        filename: "boundle.js",
        publicPath: "./dist/"
    },

style-loader/useable

{
  test: /\.css$/,
  use:[{
     loader:"style-loader/useable"
     }, {
     loader: "css-loader",
   }]
}

引用的时候 设置use或者unuse 可以控制这个css是否被使用

import app from './style/app.css';

var flg = false;
setInterval(function(){
if(!flg) {
    app.use()
} else {
    app.unuse()
}
flg = !flg
}, 1000)

css-loader options

css-loader可以使用modules 模块化css，

use: [{
     loader: "style-loader"
     }, {
       loader: "css-loader",
       options:{
       modules: true
    }
 }]

用法

// home.css
.box{
    width: 100px;
    height: 100px;
    composes: line from './line.css';
}

// line.css
.line{
    border: 2px solid yellow;
}

import home from './style/home.css'
import "./style/line.css"
var body = document.getElementById("app")
body.innerHTML = "<div class='"+home.box+"'></div>"

打包出来后的文件