webpack的loader

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屬性下面。