SCSS（Sass）は、CSSをより効率的に書くための拡張言語ですが、ブラウザはそのままでは理解できません。そこで、webpackを使ってSCSSファイルをCSSに変換する仕組みを構築していきます。
実務で使用される、SCSSから変換後のCSSファイルを出力する方法についても解説します。
パッケージのインストール
まずは必要なパッケージをインストールするために、以下のコマンドを実行します。
npm i -D sass sass-loader css-loader mini-css-extract-plugin postcss-loader postcss autoprefixer- sass: SCSSファイルをコンパイルするためのパッケージ
- sass-loader: webpackでSCSSを読み込むためのローダー
- css-loader: CSSをwebpackで扱えるモジュールとして変換するためのローダー
- mini-css-extract-plugin: CSSを別ファイルに抽出するためのプラグイン
- postcss-loader: PostCSSを使ってCSSの後処理を行うためのローダー
- postcss: CSSの後処理を行うためのツール
- autoprefixer: 各ブラウザで必要なプレフィックスを自動で付与するためのプラグイン
基本的なwebpack構成
まず、webpackの基本的な設定は以下のとおりです。
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader, // CSSを別ファイルとして抽出
'css-loader', // CSSをモジュールとして処理
'postcss-loader', // PostCSSを使用
'sass-loader', // SCSSをCSSにコンパイル
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css', // 出力するCSSファイルの名前
}),
],
};PostCSSの設定
PostCSSを使うために、postcss.config.jsファイルを作成します。これにより、autoprefixerを利用したブラウザ対応の自動補完が可能になります。このファイルはプロジェクトのルートに配置します。
module.exports = {
plugins: [
require('autoprefixer')({ grid: true })
]
};autoprefixerは、.browserslistrcに基づいてサポートするブラウザを判定します。このファイルもプロジェクトのルートに配置します。
> 1%
last 2 versions
not deadこれにより、1%以上のシェアを持つブラウザ、最新の2バージョン、サポートが終了していないブラウザに対応します。
.browserslistrcファイルに> 0%のみを記述することで、すべてのブラウザを対象とする設定になります。
これにより、プレフィックスが付与されるスタイルの種類を最大限確認できるため、設定や導入が正しく行われているかをチェックすることができます。
.browserslistrcの書き方については、Qiitaの「.browserslistrcで対象ブラウザを指定する」をご参考ください。
SCSSからCSSへの変換と出力
webpack.config.js、postcss.config.js、.browserslistrcの3つの設定ファイルを作成したら、次は実際にSCSSファイルを作成し、エントリーポイントとして指定したindex.jsファイルに読み込ませましょう。
以下は、SCSSのサンプルコードです。
$primary-color: #3498db;
body {
background-color: $primary-color;
color: white;
}上記コードを、index.jsで読み込みます。
import '../scss/style.scss';これでwebpackを実行すると、dist/cssディレクトリにCSSファイルが生成されます。
npx webpack --mode developmentまとめ
この記事では、webpackを使ってSCSSをCSSに変換し、PostCSSと.browserslistrcでブラウザ対応を行う方法を紹介しました。
- SCSSをJSからインポートし、CSSに変換する
MiniCssExtractPluginを使ってCSSを別ファイルとして出力- PostCSSと
autoprefixerでブラウザ対応のプレフィックスを追加
これらの手順を実践することで、効率的にSCSSをCSSに変換し、最新のブラウザに対応したスタイルを提供することができます。
以上、webpackでSCSSをCSSに変換し、別ファイルとして出力する方法のご紹介でした。
