此篇介紹如何將 CSSSASS 引入 Webpack 專案中,並使用 postcssautoprefixer 自動將 CSS 加入相對的瀏覽器前綴。

安裝 css-loader style-loader

1
npm i -D css-loader
1
npm i -D 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

  1. src 資料夾創建一隻 app.css
1
2
3
body {
background-color: yellowgreen;
}
  1. app.css 引入 app.js

app.js 加入

1
require('./app.css');
  1. 執行 webpack 打包
1
npm run prod

執行完打開 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

  1. src 資料夾將 app.css 修改成 app.scss
1
2
3
4
5
6
body {
background-color: yellowgreen;
h1 {
color: green;
}
}
  1. src 資料夾修改 index.html
1
2
3
<body>
<h1> Test SASS Loader</h1>
</body>
  1. app.scss 引入 app.js
1
require('./app.scss');
  1. 執行 webpack 打包
1
npm run prod

執行完打開 dist 資料夾 index.html 就可以看到我們更改的標題顏色囉!

網頁更改標題顏色

SASS 引入完成!!大家有發現網頁上的 css 怎麼都是跑到 head 裡面啦?接下來要教怎麼輸出成一隻 csslink 的方式引入到頁面上。

安裝 ExtractTextWebpackPlugin

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',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
......
new ExtractTextPlugin({
filename: 'app.css',
disable: false,
allChunks: true
})
]
};
  • 執行 webpack 打包
1
npm run prod

執行完打開 dist 資料夾 index.html 就可以看到 app.csshead 裡面囉!

每次因為不同瀏覽器寫前綴語是不是超麻煩的啊?接下來要來引入 postcssautoprefixer ,透過設定 browserlist 讓 Webpack 自動做完這些事情呦。

安裝 postcss-loader

1
npm i -D  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',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
}
......
};

測試 postcss

  1. 修改 app.scss 檔案
1
2
3
4
5
6
7
body {
background-color: yellowgreen;
h1 {
color: green;
transform: scale(1.5);
}
}
  1. 執行 Webpack 打包
1
npm run prod

打開 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,謝謝收看。

參考資料