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

やりたいこと


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

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

ディレクトリ構成


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

1
├── dist
2
├── src
3
│   ├── _base.scss
4
│   ├── _variables.scss
5
│   └── style.scss
6
├── package.json
7
└── 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
const ExtractTextPlugin = require('extract-text-webpack-plugin');
2
const path = require('path');
3
4
module.exports = {
5
  module: {
6
    rules: [
7
      {
8
        test: /\.scss$/,
9
        use: ExtractTextPlugin.extract({
10
          fallback: 'style-loader',
11
          use: ['css-loader', 'sass-loader']
12
        })
13
      }
14
    ]
15
  },
16
  plugins: [
17
    new ExtractTextPlugin('[name].css')
18
  ]
19
}

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

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

「srcって言われてもsrcディレクトリあるんですけど…??」という気持ちになるのですが、どうもwebpackは4からentryを指定しない限りはデフォルトでsrc/index.jsを見に行くようです。

で、それがないと上述のエラーを吐くようです。上述のメッセージだとあたかもsrcがないので怒られているように見えるのですが、実際はsrc/index.jsがないので怒られてます。まったく、エラーメッセージはちゃんとしたものを出力していただきたいですね。

ではindex.jsを作るのかという話になるのですが、今回はJavaScriptは関係ないのでindex.jsなんぞ作る必要がありません。というわけでenrtyを指定することにします。

style.scssで他のscssをインポートしてwebpack.config.jsのentryにstyle.scssを指定します。下記のような感じです。

1
const ExtractTextPlugin = require('extract-text-webpack-plugin');
2
const path = require('path');
3
4
module.exports = {
5
  context: path.join(__dirname, './src'),
6
  entry: {
7
    style: "./style.scss",
8
  },
9
  output: {
10
    path: path.join(__dirname, './dist'),
11
    filename: '[name].css'
12
  },
13
  module: {
14
    rules: [
15
      {
16
        test: /\.scss$/,
17
        use: ExtractTextPlugin.extract({
18
          fallback: 'style-loader',
19
          use: ['css-loader', 'sass-loader']
20
        })
21
      }
22
    ]
23
  },
24
  plugins: [
25
    new ExtractTextPlugin('[name].css')
26
  ]
27
}

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

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

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

参考


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