Borislav Hadzhiev
Sun Mar 20 2022·2 min read
Photo by Bruno Emmanuelle
To solve the error "Module not found: Error: Can't resolve 'sass-loader'",
make sure to install the package by opening your terminal in your project's root
directory and running the command
npm install --save-dev sass-loader sass webpack
and restart your development
server.
Open your terminal in your project's root directory (where your package.json
file is located) and run the following commands:
# 👇️ with NPM npm install --save-dev sass-loader sass webpack # 👇️ ONLY If you use TypeScript npm install --save-dev @types/sass-loader @types/sass @types/webpack # ---------------------------------------------- # 👇️ with YARN yarn add sass-loader sass webpack --dev # 👇️ ONLY If you use TypeScript yarn add @types/sass-loader @types/sass @types/webpack --dev
The command will add the sass-loader package to the dependencies of your project.
npm start
command.The installed packages assume that you use Dart sass.
Now you can import your scss
file.
import "./style.scss";
The imported file may look something like:
$body-color: red; body { color: $body-color; }
And your webpack config should look something like:
module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings "style-loader", // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, ], }, };
If you haven't installed the style-loader and css-loader packages, make sure to do so.
# 👇️ with NPM npm install --save-dev style-loader css-loader # ---------------------------------------------- # 👇️ with YARN yarn add style-loader css-loader --dev
And restart your development server.
For custom config and options, refer to the
npm page of the sass-loader
package.
If the error is not resolved, try to delete your node_modules
and
package-lock.json
(not package.json
) files, re-run npm install
and restart
your IDE.
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install
If you're still getting the "Module not found: Error: Can't resolve
'sass-loader'" error, open your package.json
file and make sure it contains
the sass-loader
package in the devDependencies
object.
{ // ... rest "devDependencies": { "sass-loader": "^12.6.0", "@types/sass-loader": "^8.0.3", "sass": "^1.49.11", "@types/sass": "^1.43.1", "webpack": "^5.71.0", "@types/webpack": "^5.28.0", "css-loader": "^6.7.1", "style-loader": "^3.3.1" } }
The sass-loader
module should NOT be globally installed or be in your
project's dependencies
, it should be in the devDependencies
object in your
package.json
file.
You can try to manually add the lines and re-run npm install
.
npm install
Or install the latest version of the packages:
# 👇️ with NPM npm install --save-dev sass-loader@latest sass@latest webpack@latest npm install --save-dev style-loader@latest css-loader@latest # 👇️ ONLY If you use TypeScript npm install --save-dev @types/sass-loader@latest @types/sass@latest @types/webpack@latest # ---------------------------------------------- # 👇️ with YARN yarn add sass-loader@latest sass@latest webpack@latest --dev yarn add style-loader@latest css-loader@latest --dev # 👇️ ONLY If you use TypeScript yarn add @types/sass-loader@latest @types/sass@latest @types/webpack@latest --dev