webpack 样式模块打包深入学习
1. style-loader css-loader sass-loader 分别的作用
style-loader: 将所有的样式嵌入到dom的style属性当中。
css-loader: 将css当中的 @import 和 url(...) 解析成 import / require 引入
sass-loader: 将代码sass编译成css
2. webpack的执行顺序
配置的时候顺序不能乱写,需要遵从 style-loader!css-loader!sass-loader的顺序严格执行的。
但是有一点,webpack的loader执行顺序是从右到左的。
3. style-loader!css-loader!sass-loader 合起来的作用
首先将sass编译成css,然后将 css当中的 url(...)/@import 引入方式解析成 import/ require 在js当中引入,最后将代码到相应dom的style属性下面。