こんにちは、おぐらです。
過去にSassのコンパイルについてまとめた記事を投稿しましたが、最近になってSassに動きがあったので再度作成しました。
この記事はDartSassをnpmから使う方法を簡単にまとめた記事です。
npmから使うことに焦点を当てているので、DartSassの詳しい書き方などには触れていません。
npmでNodeSassパッケージを使っている人や、これからnpmを使ってSassのプロジェクトをはじめる人にオススメです。
npmからDartSassを使う
まずはなぜ使うのかを話します。
それから簡単な使い方をみていきましょう。
LibSassは非推奨になった
2020年10月にSassの公式からLibSassは非推奨と正式にリリースがありました。
LibSassによってつくられているNodeSassパッケージも含まれます。
Sass公式は主なポイントとして次の4つをあげています。
- 新しいSassプロジェクトにLibSassを使うことを推奨しません。 代わりにDartSassを使用してください。
- 既存のすべてのLibSassユーザーが最終的にDartSassに移行する計画を立て、すべてのSassライブラリが最終的にLibSassのサポートを終了する計画を立てることをオススメします。
- 新しいCSS機能との互換性など、LibSassに新しい機能を追加する予定はありません。
- LibSassとNodeSassは、主要なバグやセキュリティの問題の修正、最新のNodeバージョンとの互換性の維持など、ベストエフォートベースで無期限に維持され続けます。
明確に代わりにDartSassを使ってくれと書かれていますね。
今後もLibSassを使っていくには問題が多かったようです。
npmでDartSassをインストール
まずは簡単な例としてプロジェクトを作成します。
プロジェクトを作成したらDartSassパッケージをインストール。
紛らわしいですが、DartSassインストール時のパッケージ名はsass。
間違えないようにしましょう。
npm init npm install sass --save-dev
プロジェクト直下にsrcディレクトリを作成、その中にapp.scssを配置しておきます。
コンパイルできることを確認するためだけなので、内容はシンプルです。
// src/app.scss @use "sass:map"; $sizes: ( sm: 100px, md: 200px, lg: 300px, ); .hoge { width: map.get($sizes, sm); }
yarnの場合は適宜変更してください。
コマンドからコンパイル
1番手っ取り早いのはコマンドでコンパイルする方法でしょう。
ターミナルからsassコマンドを使います。
// sass [output.css] npx sass src/app.scss dist/app.css
1つ以上のファイルをコンパイルするときはMany-to-many Modeを使います。
npx sass hoge.scss:hoge.css piyo.scss:piyo.css
ディレクトリ対ディレクトリも可能です。
npx sass src:public/css
オプションを渡すこともできます。
よく使うものだとウォッチモードでファイルを監視したり、コンパイルのスタイルを変更したりでしょうか。
// compressedスタイルでコンパイルする npx sass src/app.scss dist/app.css --style=compressed
// watchモードでファイルの更新を監視する npx sass src/app.scss dist/app.css --watch
オプションはヘルプオプションを渡せば確認できます。
ヘルプを見る限りstyleは2種類しかなさそうですね。
npx sass --help // -hと省略可能です
例ではnpxを使ってますが、npm-scriptsに指定してもらっても大丈夫です。
NodeSassパッケージと互換性あり
JavaScriptpから使おうとした場合、一部を除いてnode-sassパッケージと同じように使えます。
次はrenderとrenderSyncを使った例です。
const sass = require('sass'); sass.render({ file: './src/app.scss' }, (err, result) => { // Do something }); const data = sass.renderSync({file: './src/app.scss'});
renderはコールバックの引数resultに、renderSyncは戻り値としてコンパイルしたデータを受け取ります。
File systemモジュールを使ってよしなにファイルにしてあげるなどしてください。
render関数はコールバックオーバーヘッドの関係で、renderSync関数と比較してパフォーマンスが落ちます。
対策としてfibersを使うことでパフォーマンス改善できると記されています。
const sass = require('sass'); const Fiber = require("fibers"); sass.render({ file: './src/app.scss', fiber: Fiber, }, (err, result) => { // Do something });
コンパイル時間を比較すると確かにrenderSyncはかなり速いですね。
renderもfibersを使うことで半分以下になったので使ったほうがいいですね。
応用編
応用編としてwebpackでも使う方法を簡単にまとめておきます。
といってもsass-loaderを使うことに変わりは無くて、コンパイル用に用意するパッケージをDartSassにするだけです。
webpackでバンドルする
webpackを使うためのパッケージをインストールします。
はじめつくったプロジェクトに追加するので、DartSassとfibersはすでにインストール済みとします。
npm install webpack webpack-cli sass-loader css-loader style-loader --save-dev
エントリーファイルのindex.jsをsrcディレクトリに作成して、app.scssをインポートしておきます。
// ./src/index.js import './app.scss';
続いてwebpackの設定ファイルを作成。
プロジェクトルートにwebpack.config.jsを追加します。
const path = require('path'); module.exports = { entry: path.join(__dirname, 'src'), output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ], }, };
そして確認用としてdistにindex.htmlを追加。
バンドルしたJavaScriptファイルを読み込みます。
最後にビルドしましょう。
npx webpack
style要素として出力されてます。
上記はとても簡単な例です。
ほかのローダーも組み合わせることでさらに柔軟にバンドルできます。
CSSファイルを個別ファイルにする
CSSはファイルを別にしたい場合もあるでしょう。
webpackのMiniCssExtractPluginを使うことで解決できます。
webpack.config.jsにプラグインを追加する記述を追加。
最終的にstyle-loaderではなく、MiniCssExtractPluginを使うことでCSSファイルとして出力できます。
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: path.join(__dirname, 'src'), output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], }, ], }, resolve: { extensions: ['.js'], }, plugins: [ new MiniCssExtractPlugin({ filename: "app.css", }), ], };
NodeSassがプロジェクト内にある場合
NodeSassがプロジェクトに含まれている場合、DartSassを使うことを明示的にwebpackに伝えます。
webpack.config.jsに追加するだけで簡単にできますよ。
module: { rules: [ { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: require('sass'), }, }, ], }, ], },
上記はmoduleのところだけを抜粋しています。
今までNodeSassを使ってきてDartSassに移行する時必要かもしれませんね。
プロジェクトにfibersをインストールしていれば自動で注入してくれます。
逆に自動注入をしたくない場合は明示的に設定が必要です。
{ loader: 'sass-loader', options: { implementation: require('sass'), sassOptions: { fiber: false, }, }, },
これからはじめる人はDartSassを使おう
これからSassを学ぶ、プロジェクトをはじめるならDartSassを使いましょう。
LibSassは非推奨になり、メンテナンスは続けられますが、今後追加される新しい機能などとの互換
性はありません。
npmのNodeSassパッケージもLibSassでできているので、これからは使わないようにしましょう。
面倒ですがわたしもNodeSass使ってるプロジェクトをDartSassに移行します。
参考リンク
LibSass is Deprecated
sass – npm
Dart Sass Command-Line Interface
JavaScript API
fibers – npm
sass-loader | webpack
MiniCssExtractPlugin | webpack