1. 程式人生 > >webpack 樣式模塊打包深入學習

webpack 樣式模塊打包深入學習

bpa sas nbsp require 入學 不能 ade 引入 但是

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

webpack 樣式模塊打包深入學習