webpackを利用してsass(scss)をコンパイルする

スポンサーリンク

はじめに

webpackを利用してsass(scss)をコンパイルするためのまとめです。

注意事項

  • コマンドプロンプトからnpmを実行するためにnode.jsがインストールされている必要があります。

環境

OS Windows 7 Pro 64bit
その他 npm 3.10.10
webpack 2.2.1

sassとは

sassとはSyntactically Awesome Style Sheetsの略で、成熟した、安定した、プロフェッショナルなグレードのcss拡張言語です。
変数、ネストされたルール、ミックスイン、インラインインポートなどを完全にcss互換の構文で使用することができます。

sassには2つの構文がありそれぞれ拡張子がscssとsassとなっています。

scss構文

scssはcssの構文を拡張したもので括弧やセミコロンを使用します。

$color: #ccc;

body {
  color: $color;
}

sass構文

sassはより簡潔なcssの記述でセレクタのネストを示すために括弧ではなく字下げを使用し、セミコロンではなく改行を使用してプロパティを分離します。

$color; #ccc

body
  color: $color

環境の作成

webpackを利用してsassをコンパイルするための環境を作成します。

package.jsonを作成する

以下のコマンドを入力してpackage.jsonを作成します。

> npm init

webpackをインストールする

webpackコマンドを利用するためにwebpackをグローバルにインストールします。

> npm install -g webpack

必要なモジュールをインストールする

scssをコンパイルするためのモジュールをインストールします。

> npm install --save-dev css-loader style-loader sass-loader node-sass webpack
css-loader
cssを利用するためのモジュールです。
style-loader
DOMに>style<タグを挿入するためのモジュールです。css-loaderと組み合わせるよう推奨されています。
sass-loader
sassをcssにコンパイルするためのモジュールです。
node-sass
node.jsでsassをコンパイルするためのモジュールです。

cssのファイルを作成するためにExtractTextPluginをインストールします。webpackのバージョンが2以上の場合普通にインストールすると依存関係がエラーとなってしまうため現状で最新のバージョン(v2.0.0-rc.3)をインストールします。

> npm install --save-dev extract-text-webpack-plugin@v2.0.0-rc.3

sassファイルを作成する

ファイルを作成する前にフォルダ構成を以下のようにします。/src/scssフォルダにコンパイル前のscssファイルを入れておき、コンパイルしたものを/public/cssフォルダに出力していきます。

root
  ┣ public
  ┃   ┗ css
  ┣ src
  ┃   ┗ scss
  ┃       ┗ index.scss
  ┗ package.json

index.scssの中身を以下のように書いておきます。

$color: #ccc;

body {
  color: $color;

  header {
    color: #fff;
  }
}

webpackの設定ファイルを作成する

webpackを利用してコンパイルするためにwebpack.config.jsを作成し中身を以下のように記述します。

const path = require('path');
const ExtractTestPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        index: './src/scss/index.scss'
    },
    output: {
        path: path.join(__dirname, 'public/css'),
        filename: '[name].css'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTestPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTestPlugin('[name].css')
    ]
};

webpackでコンパイルを実行する

以下のコマンドを入力してsassのコンパイルを行ないます。

> webpack

publicのcssフォルダ内にindex.cssのファイルが作成されます。

root
    ┣ public
    ┃   ┗ css
+   ┃       ┗ index.css
    ┣ src
    ┃   ┗ scss
    ┃       ┗ index.scss
    ┣ package.json
    ┗ webpack.config.js

body {
  color: #ccc; }
  body header {
    color: #fff; }

おまけ

出力ファイルをフォルダ分けする

出力ファイルを別のフォルダにする場合はentryの左側をフォルダ階層にします。


     entry: {
         index: './src/scss/index.scss',
+        'user/index': './src/scss/user/index.scss'
     },

以下のように別フォルダにcssが作成されます。

root
    ┣ public
    ┃   ┗ css
+   ┃       ┣ user
+   ┃       ┃   ┗ index.css
    ┃       ┗ index.css
    ┣ src
    ┃   ┗ scss
    ┃       ┣ user
    ┃       ┃   ┗ index.scss
    ┃       ┗ index.scss
    ┣ package.json
    ┗ webpack.config.js

cssを圧縮する

cssを圧縮する場合はcss-loaderにminimizeパラメータを指定します。


      loader: ExtractTestPlugin.extract({
          fallback: 'style-loader',
-         use: 'css-loader!sass-loader'
+         use: 'css-loader&minimize!sass-loader'
      })
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする