1-12. [练习]处理样式

index.css:

body{
    background: #333;
    color: #fff;
}

index.js:

var content = require("./assets/index.css")     //不识别，会报错，需要配置loader
console.log(content); //css的源码字符串

style-loader:

module.exports = function (sourceCode) {    //转换成相应的js代码
    var code = `var style = document.createElement("style");
    style.innerHTML = \`${sourceCode}\`;       
    document.head.appendChild(style);
    module.exports = \`${sourceCode}\``; //sourceCode是index.css的代码      //注意转义符号      //注意导出
    return code;
}

webpack.config:

module.exports = {
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [{
            test: /\.css$/,         //遇到.css的文件，就用style-loader处理
            use: ["./loaders/style-loader"]
        }]
    }
}

最终样式：