Zenn
💡

【Webpack5】SassをCSSに変換する

2023/05/22に公開
CSS
Scss
webpack
tech

webpackの設定

インストール

package.jsonをデフォルトで作成

npm init -y

webpackインストール

webpack 4.0以降では、webpack-cliでコマンドライン操作用のパッケージが提供されているので、一緒にインストールします。

npm install -D webpack webpack-cli

インストールが完了したパッケージは、node_modulesに保存され、package.json,package-lock.jsonが更新されます。

$ tree -L 2  return
.
├── node_modules  //npm でインストールされるパッケージのディレクトリ
│    ・・・略・・・
│   ├── webpack
│   ├── webpack-cli
│    ・・・略・・・
├── package-lock.json  //npm設定ファイル
└── package.json  //npm設定ファイル

初期構成

srcフォルダを作成し、その中にエントリーポイントindex.js, Sassフォルダを作成しました。

.
├── dist  //ビルド時に自動的生成されるフォルダ
├── index.html
├── node_modules
├── package-lock.json
├── package.json
└── src  //追加
       ├── Sass
       │   ├── main.scss
       │   ├── _variables.scss
       │   └── _mixin.scss
       └── index.js  // エントリーポイント

src/index.js

エントリーポイントindex.jsでは、src/Sassにあるファイルを読み込みます。[1]

import './Sass/main.scss'
import './Sass/_variables.scss'
import './Sass/_mixin.scss'

main.scss

@use './variables';
@use './mixin';
.main {
  display: flex;
  &--column {
    flex-direction: column;
    color: variables.$blue;
  }
  &__title {
    @include mixin.title()
  }
}

_variables.scss

$blue: blue;

_mixin.scss

@mixin title {
  font-size: 1.25rem;
}

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/style.css">
<title>Sass 読み込みサンプル</title>
</head>
 
<body>
<div class="main main--column">
  <h1 class="main__title">Sass</h1>
  <p>sample text.</p>
</div>
<!--<script src="dist/main.js"></script>-->
</body>
</html>

ローダーとプラグインのインストール

Sass -> CSSの変換に必要なローダーとプラグインをインストールします。

$ npm install -D css-loader sass-loader sass mini-css-extract-plugin
ローダー / プラグイン
css-loader @import やurl()をJSのimportやrequire()に変換するモジュール
sass-loader Sass を CSS へ変換するモジュール
sass Sass をコンパイルするモジュール
MiniCssExtractPlugin CSS を別ファイルとして出力するプラグイン

webpack.config.js

webpack の設定ファイル webpack.config.js を作成します。

.
├── dist  //ビルド時に自動的生成されるフォルダ
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js // 追加

ローダーの処理の流れ

  1. sass-loaderでSassをCSSへ変換
  2. css-loaderでCSSをJSに変換
  3. MiniCssExtractPlugin.loaderでCSSを抽出して別ファイルとして出力

指定する際は、MiniCssExtractPlugin.loader,css-loader,sass-loaderの順に指定すると、sass-loader→css-loader→MiniCssExtractPlugin.loaderの順に適用されます。

const path = require('path');

// プラグインなのでrequire() を使用
const MinCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(scss|sass|css)$/i,
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MinCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
  devtool: 'source-map',
  watchOptions: {
    ignored: /node_modules/
  }
}

npm run コマンド設定

npm run コマンドでwebpackを実行できるようにするため、package.jsonのscriptsにコマンドを追加します。

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "watch": "webpack --mode development --watch",
    "sass-ver": "sass --version"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.4",
    "mini-css-extract-plugin": "^2.7.6",
    "sass": "^1.62.1",
    "sass-loader": "^13.3.0",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1"
  }
}

sassのバージョンを確認

npm run sass-ver

> webpack@1.0.0 sass-ver
> sass --version

1.62.1 compiled with dart2js 2.19.6

ビルド

以下を実行すると、distにSassフォルダのファイルがコンパイルされたCSSファイル style.cssが出力されます。

npm run build

ビルド後

.
├── dist
│   ├── main.js // エントリポイントでSassを読み込んでいるだけなので、main.js は空
│   ├── style.css
│   └── style.css.map
├── index.html 
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

npm run buildの場合、style.cssは以下のようにoutputStyleは compressedで出力されます。

.main{display:flex}.main--column{flex-direction:column;color:blue}.main__title{font-size:1.25rem}



/*# sourceMappingURL=style.css.map*/

npm run dev

npm run devの場合、style.cssはコメントと共にoutputStyleはexpandedで出力されます。

/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Sass/main.scss ***!
  \*************************************************************************************************************/
  .main {
    display: flex;
  }
  .main--column {
    flex-direction: column;
    color: blue;
  }
  .main__title {
    font-size: 1.25rem;
  }
  /*!*******************************************************************************************************************!*\
    !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Sass/_variables.scss ***!
    \*******************************************************************************************************************/
  
  /*!***************************************************************************************************************!*\
    !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Sass/_mixin.scss ***!
    \***************************************************************************************************************/
  
  
  /*# sourceMappingURL=style.css.map*/

参考

webpack を使って Sass をコンパイルする方法
最新版で学ぶwebpack 5入門 JavaScriptのモジュールバンドラ

脚注

  1. 最初、エントリーポイントでimportしなかったのが原因で、Undefined Variablesのエラーが出てきました。 ↩︎

Discussion