此篇介紹如何將 CSS
、 SASS
引入 Webpack
專案中,並使用 postcss
的 autoprefixer
自動將 CSS
加入相對的瀏覽器前綴。
安裝 css-loader
style-loader
設定 webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12
| module.exports = { ...... module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, ...... };
|
測試 CSS
- 在
src
資料夾創建一隻 app.css
1 2 3
| body { background-color: yellowgreen; }
|
- 將
app.css
引入 app.js
中
在 app.js
加入
- 執行
webpack
打包
執行完打開 dist
資料夾 index.html
就可以看到我們更改的草綠色背景囉!
到這裡我們完成引入 CSS
的動作,接下來要來試試引入 SASS
。
安裝 sass-loader
1
| npm i sass-loader node-sass webpack -D
|
修改 webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12
| module.exports = { ...... module: { rules: [ { test: /\.css|scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] }, ...... };
|
測試 SASS
- 在
src
資料夾將 app.css
修改成 app.scss
1 2 3 4 5 6
| body { background-color: yellowgreen; h1 { color: green; } }
|
- 在
src
資料夾修改 index.html
1 2 3
| <body> <h1> Test SASS Loader</h1> </body>
|
- 將
app.scss
引入 app.js
中
- 執行
webpack
打包
執行完打開 dist
資料夾 index.html
就可以看到我們更改的標題顏色囉!
SASS
引入完成!!大家有發現網頁上的 css
怎麼都是跑到 head
裡面啦?接下來要教怎麼輸出成一隻 css
用 link
的方式引入到頁面上。
1
| npm i -D extract-text-webpack-plugin
|
修改 webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| const ExtractTextPlugin = require("extract-text-webpack-plugin"); ...... module.exports = { ...... module: { rules: [ { test: /\.css|scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }, plugins: [ ...... new ExtractTextPlugin({ filename: 'app.css', disable: false, allChunks: true }) ] };
|
執行完打開 dist
資料夾 index.html
就可以看到 app.css
在 head
裡面囉!
每次因為不同瀏覽器寫前綴語是不是超麻煩的啊?接下來要來引入 postcss
的 autoprefixer
,透過設定 browserlist 讓 Webpack 自動做完這些事情呦。
安裝 postcss-loader
新增 postcss.config.js
1 2 3 4 5
| module.exports = { plugins: { 'autoprefixer': {} } }
|
在 package.json
設定 browserslist
1 2 3 4 5 6 7 8 9
| { ...... "browserslist": [ "Explorer 11", "> 1%", "last 2 versions", "not ie <= 10" ] }
|
修改 webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| module.exports = { ...... module: { rules: [ { test: /\.css|scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] }) } ] } ...... };
|
測試 postcss
- 修改
app.scss
檔案
1 2 3 4 5 6 7
| body { background-color: yellowgreen; h1 { color: green; transform: scale(1.5); } }
|
- 執行
Webpack
打包
打開 dist/app.css
就可以看到下面自動加入前綴語的 css
囉~
1
| body{background-color:#9acd32}body h1{color:green;-webkit-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}
|
今天的實作檔案整理在此github,謝謝收看。
參考資料