CODEWITHSUNDEEP
webpacksass-loader
paraxial
paraxial

Reputation: 451

Module not found: Error: Can't resolve 'sass-loader'

New to webpack. Trying to get sass-loader to play nice with my react project, have followed tutorials. Config seems correct, but result is always "Can't resolve 'sass-loader'".

I suspect this is some glaringly obvious error, but no amount of searching for it or googling has led me to it yet. Any help appreciated.

Error

ERROR in ./ui/index.js
Module not found: Error: Can't resolve 'sass-loader' in '/root/src'
 @ ./ui/index.js 19:0-33
 @ multi webpack-hot-middleware/client?reload=true babel-polyfill ./ui/index.js

What I have done so far (on said pre-existing react project):

npm i --save-dev node-sass sass-loader

package.json, under devDependencies

"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"webpack": "~2.2.1",
"webpack-dev-middleware": "~1.12.0",
"webpack-hot-middleware": "~2.20.0",
"webpack-node-externals": "~1.6.0"

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './src/App';

require('./src/styles/main.scss');

ReactDOM.render(<HashRouter><App /></HashRouter>, 
document.getElementById('root'));

webpack.config.react.js:

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const sourcePath = path.join(__dirname, './ui');
const extractStyle = new ExtractTextPlugin('styles.css');

//======break to module rules=======

module: {
  rules: [
    {
      test: /\.jsx?$/,
      include: sourcePath,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react'],
      },
    },
    {
      test: /\.scss$/,
      include: sourcePath,
      exclude: /node_modules/,
      use: extractStyle.extract('sass-loader?sourceMap'),
    },
    {
      test: /\.css$/,
      exclude: sourcePath,
      loader: extractStyle.extract('css-loader'),
    },
  ],
},

//======= break again for plugins =====

plugins: [
  extractStyle,
  new HtmlWebpackPlugin({
    template: 'ui/index.html',
    title: 'name',
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
  }),
]

Possible confounder: This is all running in a development docker container. It's been rebuilt and npm install has run again, though.

Upvotes: 33

Views: 118699

Answers (10)

Sagar Vavadiya
Sagar Vavadiya

Reputation: 1

Solution for next js

  1. in page router : import scss file in _app file(main file)
  2. in app router : inport scss in main layout or main page file

Upvotes: 0

Miebaka
Miebaka

Reputation: 295

This issue may be a result of caching. There's no need to restart the project.

Run the following on the terminal

rm -r node_modules

npm install

npm install -D sass-loader@^10 sass

Upvotes: 20

Berkay Nayman
Berkay Nayman

Reputation: 242

i am uninstall package and was this error for vue3 -> Failed to resolve loader: sass-loader You may need to install it.

removed for all uninstall packages but i was a to forget in line change

src/App.vue

-OLD

< style lang="scss" > . .

-NEW - THIS TRUE

< style > . . < /style >

Upvotes: -1

Cyebukayire
Cyebukayire

Reputation: 948

This answer did help me: Problem Solved

You may try

npm install -D sass-loader@^10 sass

Upvotes: 3

Samira
Samira

Reputation: 2733

enter image description here

I had this problem and I solved it when I installed my project

vue create project

next enter image description here

select manually then

enter image description here

finally

enter image description here

Upvotes: 0

npcoder
npcoder

Reputation: 454

In my case, it was due to version conflict between 'sass-loader' and 'webpack'.

In package.json file, I down graded the sass-loader version to "^8.0.2", then I ran npm update command.

Here is the final package.json code

{
  "name": "My Vue3 App",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^8.1.1",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Upvotes: 3

Balaji
Balaji

Reputation: 10917

use Below Command

npm install sass-loader -D

Go to webpack.config.js

module: {
        rules: [
           
       {     
          test: /\.scss$/,
         
            {          
                test: /\.css$/,
                use: [
                  
                  'css-loader',
                  'sass-loader'<-----------------------sass loader
                ]}
    
        ],

Upvotes: 0

atazmin
atazmin

Reputation: 5687

For my nuxt app, deploying using AWS CodePipeline (Bitbucket) to AWS Elastic Beanstalk. What helped prepending "npm install sass-loader"(this have worked too "npm install")to build script, not sure if it is best way but it works for now.

Procfile

web: npm run deploy

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "npm install sass-loader && npm run build && npm run start"
  }

Upvotes: 0

Ishan Liyanage
Ishan Liyanage

Reputation: 2407

Go to the project and run below two commands

npm install sass-loader -D

npm install node-sass -D

Upvotes: 45

paraxial
paraxial

Reputation: 451

As in above comment - false alarm. Somewhere between Docker image caching and npm, the sass-loader and node-sass modules were reported as being installed, while not actually being installed. The usual rm node_modules and rebuilding with no cache trick fixed it.

Upvotes: 12

Related Questions