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

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

[markdown]
## Installation

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

* [sass-loader](https://webpack.js.org/loaders/sass-loader/)
* [webpack-contrib/sass-loader: Sass loader for webpack. Compiles Sass to CSS.](https://github.com/webpack-contrib/sass-loader)

“`prettyprinted
% yarn add –dev sass-loader node-sass
yarn add v0.24.6
“`

## webpack.config.js

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

“`javascript: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 ファイル内の拡張子を忘れずに変更しておきます。

“`javascript:app/index.js
import styles from ‘./stylesheets/style.scss’;
“`

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

“`sass: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` コマンドを実行します。

“`prettyprinted
% $(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` がまとめて指定されます。

“`prettyprinted
% $(yarn bin)/webpack -d
“`

> * [webpack 2 入門: debug, sourcemap, uglify, watch | deadwood](https://www.d-wood.com/blog/2017/06/01_8997.html#debug_mode_sourcemap)

[Chrome で確認した](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0)ところ、`–devtool eval-cheap-module-source-map` の指定では SCSS ファイルの Source Map 機能の利用が確認できませんでした。

> * [Devtool](https://webpack.js.org/configuration/devtool/)
> * [sass-loader](https://webpack.js.org/loaders/sass-loader/#source-maps)

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

> * [Add: sass-loader · DriftwoodJP/sandbox-webpack@759e21c](https://github.com/DriftwoodJP/sandbox-webpack/commit/759e21c221d8b4cf67fd522ee8d60860379031a1)
[/markdown]