,

[webpack] webpack 2 入門: sass-loader で scss ファイルを扱う

公開日: 2017/06/08
更新日: 2018/10/03

Saas ファイルのコンパイルにあわせて Source Map の設定も行います。

Contents

Installation

sass-loader をインストールします。
Sass ファイルのコンパイルは node-sass に依存しているので、あわせてインストールします。

% yarn add --dev sass-loader node-sass
yarn add v0.24.6

webpack.config.js

.css に加えて .scss ファイルを扱えるように設定を変更します。
拡張子と sass-loader を追加しましょう。
あわせて Source Map の機能を利用できるように設定してみます。

webpack.config.js
module.exports = {
    :
  devtool: 'source-map',
  module: {
    :
      {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {sourceMap: true},
            },
            {
              loader: 'sass-loader',
              options: {sourceMap: true},
            },
          ],
        }),
      },
    :
};

Usage

まず読込元の JavaScript ファイル内の拡張子を忘れずに変更しておきます。

app/index.js
import styles from './stylesheets/style.scss';

CSS の記述を Saas の SCSS 記法に変更しましょう。

app/stylesheets/style.scss
$light-color: #fff;
$dark-color: #000;
%slick-arrow {
  transition-duration: 1s;
  &:hover {
    transform: rotateX(180deg);
  }
  &:before {
    color: $light-color;
    font-size: 40px;
  }
}
.slick-next {
  @extend %slick-arrow;
  right: 40px;
  z-index: 99;
}
.slick-prev {
  @extend %slick-arrow;
  left: 20px;
  z-index: 100;
}
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
  color: $dark-color;
}
.slide {
  padding: 0;
  li img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

webpack コマンドを実行します。

% $(yarn bin)/webpack
Hash: e1ac71e9c7c2b6d3b9d8
Version: webpack 2.6.1
Time: 5183ms
                    Asset       Size  Chunks                    Chunk Names
               vendors.js     251 kB       0  [emitted]  [big]  vendors
                   app.js     357 kB       1  [emitted]  [big]  app
    stylesheets/style.css    23.5 kB       1  [emitted]         app
           vendors.js.map     331 kB       0  [emitted]         vendors
               app.js.map     456 kB       1  [emitted]         app
stylesheets/style.css.map    13.8 kB       1  [emitted]         app
               index.html  288 bytes          [emitted]

devtool option に関する補足

開発時には、debug mode を利用しています。
この場合、オプション --debug --devtool eval-cheap-module-source-map --output-pathinfo がまとめて指定されます。

% $(yarn bin)/webpack -d

Chrome で確認したところ、--devtool eval-cheap-module-source-map の指定では SCSS ファイルの Source Map 機能の利用が確認できませんでした。

そのため、最終的に CLI から --devtool source-map を指定しています。