sass-loader require("node-sass")); but I installed sass

Question

Im on a M1 apple, so node-sass wont work for me. Every site I work on, I uninstall node-sass and install sass( also change nvm use 16.2.0 if anyone has that issue).

this has always worked, but today after doing so I get the following errors

 Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    Error: Cannot find module 'node-sass'

So I went into node_modules/sass-loader/lib/loader.js and found this on line 46

 const render = getRenderFuncFromSassImpl(options.implementation || require("node-sass"));

and changed it to

 const render = getRenderFuncFromSassImpl(options.implementation || require("sass"));

Everything works, css is compiled.. but what I did seems like a hack,

1. Is there a better way to do it?
2. Will this break things in future?
3. Why didn't it update automatically like the other 20 sites I work on?

Answer 1

You can set the implementation of sass-loader in your package.json so it will use value of options.implementation instead of require("node-sass"):

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },
};

As for your third question, the doc states that:

By default the loader resolve the implementation based on your dependencies. Just add required implementation to package.json (sass or node-sass package) and install dependencies.

Maybe you still have node-sass listed as a dependency?

Answer 2

I struggled with the same problem. What ended up working was to delete package-lock.json and install everything again.

Answer 3

I temporarily fixed it by installing sass-loader@7 here is my package.json

npm install node-sass@npm:sass npm i sass-loader@7