🦒 webpackでsassを使用する方法【sass-loader・node-sass】
JavaScript webpack ENJIN
作成日： 2022/01/01
2

node-sassとsass-loaderをインストール

役割としては以下。
node-sass → Sassをコンパイルする
sass-loader　→ Sassを読み込む

npm install --save-dev node-sass sass-loader

package.jsonを確認

追加されているのを確認する。

{
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.5.1",
    "mini-css-extract-plugin": "^2.4.5",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

webpack-config.jsに設定を追加

const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                //ここから変更（正規表現 css,sass,scssファイルを検知したら）
                test: /\.(css|sass|scss)/,
                //ここまで変更
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        //ここから追加
                        loader: 'sass-loader'
                        //ここまで追加
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}

src/style.cssをscssに変更する

※もちろんファイル内の記述もscssに変える

エントリーポイントのJSに読み込ませているファイルを変更

import { hello } from './sub.js'
import './style.scss'

hello('hello world');

webpackを起動

画面を確認する

これだけだと分からないので、HTMLとSCSSを変更してみる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <h1>webpackチュートリアル<span>(SCSSを追加)</span></h1>

    <script src="./bundle.js"></script>
</body>
</html>

h1 {
    color: red;
    span {
        font-size: 16px;
        color: blue;
    }
}

再度画面を確認

npm run build

ちゃんと反映されているのを確認できる。
Yu
事業会社にてコーダーをしています。制作は6年目。 インプットしたことをアウトプットしています。