CSSのメタ言語であるscssを、
node.js環境でcssにトランスパイルする方法を記載します。
CSSと比較してscssは下記利点があります。
- 変数が使える
- ネストが使える
- 名前空間でネストが可能
- 別のファイルを読み込んで使える
- スタイルの使いまわしができる(主にmixinとか)
- 四則演算が普通にできる(calcとか使わなくていい)
- 関数が使える(輝度変えたりとか)
- 制御文が使える(@ifとか@forとか)
lessとかsass記法とかあるようですが、
cssの記法がそのまま使えるscss記法が、
個人的に楽なので使います。
前置きが少し長くなりましたが、始めます。
環境
node.js v8.12.0
npm v6.4.1
webpack 4.29.6
OSとかは何でもいいのですが、
今回はwindows10でVSCodeを使って作っていきます。
ターミナルはgitbashを入れています。
※特に環境は選ばないので、コマンドプロンプトとかでOK
パッケージの作成
任意のディレクトリで初期化します。
$ npm -y init
-yをつけなければ項目を設定できますが、
今回は目的から外れるので割愛します。
package.jsonが作成されます。
トランスパイルに必要なモジュールをインストールする
$ npm -D install webpack webpack-cli
$ npm -D install sass-loader node-sass style-loader css-loader
$ npm -D install mini-css-extract-plugin optimize-css-assets-webpack-plugin
-Dは開発用モジュールとして保存されるオプションで、
付けなくてもよいですが、用途的には開発用なので、
付けました。
webpackのloaderとは、指定のファイルをバンドルするものです
「バンドルする」とは1つにまとめる意味です。
| npm | 用途 |
|---|---|
| webpack | ファイルを1つまとめたり、別言語に変換したりする。 |
| webpack-cli | webpackをコマンドラインから実行する為に必要。今回は必須。 |
| sass-loader | (scss)sassをバンドルする。 |
| node-sass | sass-loaderが依存しているので必要。 |
| style-loader | タグにcssを展開する機能。 |
| css-loader | cssをjavascriptに埋め込む。 |
| mini-css-extract-plugin | cssを外部ファイルに出力 |
| optimize-css-assets-webpack-plugin | cssを圧縮する |
##Webpackの設定ファイルを作る
webpack.config.jsファイルを作成し、に次の設定を
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
anyname: './src/scss/style.scss',
},
output: {
// 全体の設定
path: path.resolve(__dirname, 'dest'),
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
}
],
},
plugins:[
// cssの出力先を指定する
new MiniCssExtractPlugin({ filename: 'style/[name].css' }),
],
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})],
},
}
トランスパイルするscssファイルを作成する
body {
background-color: aqua;
}
##実行前にフォルダ構成を確認
実際に作ったのは、
style.scssとwebpack.config.jsのみです。
##実行してcssを出力
$ npx webpack --mode production
--mode指定はwebpack4から必須です。
developmentを指定すると、cssの中身が圧縮されません。
dest/style/にanyname.cssが出力されるので中身を確認します。
body{background-color:#0ff}
まあほぼそのままなので分かりにくいですが、
一応ちゃんと圧縮されて出力されました。
副作用的に得えられた知識
- entry:を増やせば、バンドルするjsファイルを分けられる
- あまりにもファイルサイズが大きくなるなら分けるべきだろう
残った課題
- 不要な〇〇.jsが出力されてしまう
- webpack自体がjavascriptをバンドルする用途の為、仕方ない？？
- scssからcssだけが目的なら、素直にRubyでトランスパイルすればいい気がした
- 今回はscssから外部ファイル読み込みに対応してない
- url-loaderやfile-loaderを追加すればOK
感想
公式ドキュメントだけは分からない部分が多いので、
個人が調べたり、実際ソースみないといけないパターンが多かったです。
その為、調べたことはどこかに残しておけば財産になりそうです。
参考にさせて頂いたサイト
webpack公式
Loading Fonts with webpack
CSSのメタ言語Sass(SCSS)、LESSの完全入門
最新版で学ぶwebpack 4入門 – スタイルシート(CSSやSass)を取り込む方法
WebPack + Sass + file-loader のサンプル
Sassで色を調整する
webpack@4 でCSSを抽出する際は mini-css-extract-plugin を使う
Webpack4でes6/sassをcompile