Webpack: no loader to handle the SCSS is input is present

Question

I have Webpack 5 (ver. 5.37.0) installed and want to compile a SASS file to a standalone CSS file. I get the following error:

$ npx webpack
asset index.js 555 KiB [compared for emit] (name: main)
runtime modules 1.25 KiB 6 modules
cacheable modules 532 KiB
  ./src/index.js 238 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ./src/style.scss 78 bytes [built] [code generated] [1 error]

ERROR in ./src/style.scss 1:11
Module parse failed: Unexpected token (1:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> $body-color: red;
| 
| body {
 @ ./src/index.js 2:0-22

I understand that this means that no loader to handle the SCSS is input is present.

When I Google this error I find a lot of answers, but they don't work. I think they apply to older versions of Webpack.

Below is my entire webpack.config.js:

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

const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
    entry: "./src/index.js",
    mode: "development",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
          test: /\.module\.s(a|c)ss$/,
        use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader",
                   {
                        loader: "sass-loader",
                        options: {
                          // Prefer `dart-sass`
                          implementation: require("sass"),
                        },
                  },
               ],
            },
        ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: isDevelopment ? '[name].css' : '[name].[hash].css',
        chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
      })
    ],
};

Shall appreciate help debugging this.

Free Radical Free Radical · Accepted Answer · 2021-05-20T11:37:25

I've found the error. Replacing:

test: /\.module\.s(a|c)ss$/,

with

 test: /\.s(a|c)ss$/,

fixes it.

I am still pretty new to Webpack, and cutting and pasting from tutorials on the web has its hazards.

Webpack: no loader to handle the SCSS is input is present

1 Answers