Webpack 2 實作筆記 (3) — Style, CSS and Sass loaders

教你如何使用 CSS loader ,Style loader 和 Sass loader。

Webpack 2 — Style, CSS and Sass loaders

CSS

安裝 css-loaderstyle-loader

$ yarn add -D css-loader style-loader

新增一個 src/app.css,加上:

body {
background: pink;
}

設定 webpack.config.js

...
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
],
},
...

rules 的值是陣列,裡面會放一些設定。

test 的值通常用正規表示式,用來過濾符合條件的檔案。

use 裡面放要使用的 loader,執行順序會是由右到左,所以會先執行 css-loader 然後再執行 style-loader

css-loader 會被注入到 app.bundle.js 裡面,然後再透過 style-loader 把 CSS 寫入到 HTML style tag 裡面。

這不是個好方法,不過目前先這樣。

最後在 app.js 加上:

const css = require('./app.css');

Sass

安裝 sass-loadernode-sass

$ yarn add -D sass-loader node-sass

設定 webpack.config.js

...
module: {
rules: [
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
],
},
...

test 條件改成 .scss

use 多增加一個 sass-loader,因為在右邊,所以會先被執行。

設定 app.js,改成:

const css = require('./app.scss');

最後把原本的 app.css 改成 app.scss,然後寫一些 Sass :

body {
background: pink;
p {
color: green;
}
}

執行 yarn run dev 可以看到結果。

把 CSS 檔案抽離成一個單獨檔案

前面的做法會讓 CSS 直接注入在 HTML 的 style tag 裡面,這其實不是很好的做法,可以透過 extract-text-webpack-plugin 來把 CSS 檔案抽出來。

安裝 extract-text-webpack-plugin

$ yarn add -D extract-text-webpack-plugin

設定 webpack.config.js

...
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: './dist'
}),
},
],
},
plugins: [
...
new ExtractTextPlugin({
filename: 'app.css',
disable: false,
allChunks: true
}),
],
...

webpack 1.x 的寫法跟 2.x 不一樣,如果設定遇到問題可以查一下官方文件。

執行 yarn run build,可以看到 index.html 的輸出大概會長這樣:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="app.css?85bd7a55f6b243abc006" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="app.bundle.js?85bd7a55f6b243abc006"></script></body>
</html>
Show your support

Clapping shows how much you appreciated Toumasaya’s story.