webpackでSCSSだけコンパイルする環境

2021年8月22日

業務で利用するタスクランナーを最近gulpからwebpackに移行したので、勉強がてら家で同じ環境を作ってみようとしてハマった。。。

ハマったポイントとしてはnodeモジュールの依存関係

よくwebpack入門の記事で見るこういうサンプルコマンド

npm i -D webpack webpack-cli sass-loader sass style-loader css-loader

何も考えずにやると、とてもハマる・・・(合計8時間くらい費やした・・・)

ハマった原因だったのがsass-loader

上記のコマンドを打って入れるsass-loader10.0.1がインストールされる(2020/09/03現在)のだけど、何との相性が悪いのかは不明だけど、びっくりするくらい全然動かない…

いろんな記事を見てsass-loaderを7系にダウングレードすると良いという記事を見つけようやく解決できました。

なので、忘れないうちに動作した環境のpackage.jsonwebpack.config.jsを貼り付けー

/* package.json */
{
  "name": "name",
  "version": "1.0.0",
  "description": "description",
  "scripts": {
    "dev": "webpack"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "css-loader": "^4.2.2",
    "mini-css-extract-plugin": "^0.11.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.2.0",
    "string-replace-loader": "^2.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-fix-style-only-entries": "^0.5.1"
  }
}
/* webpack.config.js */

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
//webpack.config.js
module.exports = {
  mode: 'development',
  entry: {
    './style': './src/scss/style.scss'
  },
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}`,
    // 出力ファイル名
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use: [
          { // JSデータをCSSとして外部ファイル化
            loader: MiniCssExtractPlugin.loader
          },
          { // CSSをJSに変換
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
            }
          },
          { // PostCSSのための設定
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: [
                require('autoprefixer')({
                  overrideBrowserslist: ['ie >= 10', '> 5%']
                })
              ]
            }
          },
          { // CSSの中身のソースを置換したい
            loader: 'string-replace-loader',
            options: {
              multiple: [
                {
                  search: '\n\n',
                  replace: '\n',
                  flags: 'g'
                },
              ]
            }
          },
          { // SCSSをCSSに変換
            loader: 'sass-loader',
            options: {
              outputStyle: 'compact'
            }
          },
        ]
      }
    ]
  },
  plugins: [
    // 不要なJSファイルは削除
    new FixStyleOnlyEntriesPlugin({
      silent: true
    }),
    // cssの出力先を指定する
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
};

これで色々捗るようになる。
疲れた。。。