フロントエンドやってる人からしたら当たり前なのかもしれませんが、ちょっと詰まったので手順。なおwebpack4でやってます。

やりたいこと


  • webpackを使ってSassをビルドする
  • 対象のSassは複数あり一つにバンドルしたい
  • webpack以外のビルドツールは使用しない

という感じです。書くとややこしいのでbabelとかは今回は考慮しないものとします。また、webpack以外のビルドツールは使いません。Gulpとか。だってそんなに覚えられないもん。

ディレクトリ構成


こんな感じでやります。src配下の複数のscssをビルド&バンドルしてdist配下に出力します。

1
2
3
4
5
6
7
├── dist
├── src
│ ├── _base.scss
│ ├── _variables.scss
│ └── style.scss
├── package.json
└── webpack.config.js

loader・プラグインのインストール


必要なloaderとプラグインをインストールします。今回はyarnでやりました。

1
yarn add --dev webpack webpack-cli css-loader node-sass sass-loader style-loader extract-text-webpack-plugin@next

webpack.config.jsの作成


まず、初めに書いたwebpack.config.jsは下記のようなものでした。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
}

これでビルドしてみると下記のようなエラーが出ます。

1
2
ERROR in Entry module not found: Error: Can't resolve './src' in '**********'
error An unexpected error occurred: "Command failed.

「srcって言われてもsrcディレクトリあるんですけど…??」という気持ちになるのですが、どうもwebpackは4から特に指定しない限りはsrc/index.jsを見に行くようです。それならそうエラーメッセージ出せよ…。

それがないので怒られていると。ところが、今回はJavaScriptは関係ないのでindex.jsなんぞ作る必要がありません。というわけでstyle.scssで他のscssをインポートしてwebpack.config.jsのentryにstyle.scssを指定することにしました。

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
26
27
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
context: path.join(__dirname, './src'),
entry: {
style: "./style.scss",
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].css'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
}

style.scssはこんな感じです。

1
2
@import "_variables.scss";
@import "_base.scss";

後はビルドすればちゃんとdistディレクトリに出力してくれます。今回かいたものとほぼ同じ感じのやつはここに置いてます

参考


最新版で学ぶwebpack 4入門 – スタイルシート(CSSやSass)を取り込む方法