sass-loader: ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?

My code works perfectly in dev environment when I try npm run build I get the following error:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js? {“omit”:0,“remove”:true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/app/communication-center/comm-center .component.scss Module build failed: .all-common-grid { ^ Invalid CSS after “e”: expected 1 selector or at-rule, was “exports = module.ex” in D:\dev\Greater_Giving\CommunicationCenter\src\app\communication-center\comm-center.component.scss (line 1, column 1) @ ./src/app/communication-center/comm-center.component.scss 2:21-317 @ ./src/app/communication-center/comm-center.component.ts @ ./src/app/communication-center/comm-center.module.ts @ ./src/app/app-routing.module.ts @ ./src/app/app.module.ts @ ./src/app/main.ts

Following is my code

webpack.config.common.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var webpack = require('webpack');

module.exports = {
entry: {
'app': './src/app/main.ts',
'polyfills': './src/polyfills.ts',
'styles' : './src/assets/style.scss'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
},
{
test: /.html$/,
loaders: ['html-loader']
},
{
test: /.scss$/,
exclude: [ /node_modules/, helpers.root('src', 'style.scss') ],
use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},
{
test: /.scss$/ ,
use: ExtractTextPlugin.extract({
use: 'css-loader!sass-loader'
})
},
{
test: /.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
}
],
exprContextCritical: false
},
plugins: [
new ExtractTextPlugin({ // define where to save the file
filename: 'styles/[name].bundle.css',
allChunks: true,
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CopyWebpackPlugin([
{
from: 'node_modules/froala-editor/css/',
to: 'assets/froala-editor/css/',
},
{
from: 'node_modules/font-awesome/css/font-awesome.min.css',
to: 'assets/font-awesome/css/font-awesome.min.css',
},
{
from: 'node_modules/font-awesome/fonts',
to: 'assets/font-awesome/fonts'
}
]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};

webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('styles.[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
options: {
htmlLoader: {
minimize: false // workaround for ng2
}
}
}),
new UglifyJSPlugin()
]
});

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 32
Comments: 93 (4 by maintainers)

Most upvoted comments

@juanitaV try npm rebuild node-sass

+501

WebTechnolog on Oct 22, 2018

Re-installing webpack solved the issue for me. npm install --save-dev webpack

+277

AjayZinngg on Feb 1, 2018

I don’t remember what I did, but now it works! =))))))))))))

+47

mohammadjavadnouri on Aug 19, 2020

npm rebuild node-sass didnt’ work for me.

ERROR in ./src/scss/application.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/scss/application.scss) Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/gbullock/projects/gadmin-ui/src/scss' @ ./src/scss/application.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/scss/application.scss) 7:208027-208079 7:208110-208162 @ ./src/scss/application.scss @ ./src/app/app.component.ts @ ./src/main.browser.ts @ multi (webpack)-dev-server/client?http://localhost:3002 ./src/main.browser.ts

Anything jump out for anyone?

+45

JohnnyClutch on Jan 30, 2019

@WebTechnolog , thank you! Work for me!

+29

juanitaV on Oct 22, 2018

I have this error : Module build failed (from ./node_modules/sass-loader/lib/loader.js):

+29

juanitaV on Oct 22, 2018

Below command work for me npm install node-sass Thanks

+27

SrikrushnaP on Jun 6, 2019

@juanitaV try npm rebuild node-sass

Thanks this is works for me

+20

Meetkp001 on Nov 14, 2018

npm rebuild node-sass didnt’ work for me too. i got error as below

ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles/styles.scss)Module build failed (from ./node_modules/sass-loader/lib/loader.js):@import '~@pocit/ng-styles/themes/crayola-navy-blue'; @import '~@pocit/ng-styles/styles';// .mat-dialog-container {// padding: 0 !important;// }^ File to import not found or unreadable: ~@pocit/ng-styles/themes/crayola-navy-blue. in C:\Users\ra20043636\Downloads\solutionsuite-angular\src\styles\styles.scss (line 1, column 1) ERROR in projects/ng-components/src/lib/barcode-scanner/dialog/barcode-scanner ialog.component.ts(14,28): error TS2307: Cannot find module '@pocit/ng-images/general'. projects/ng-components/src/lib/input-search/input-search.component.ts(17,50): error TS2307: Cannot find module '@pocit/ng-images/general'. projects/ng-components/src/lib/snack-bar/snack-bar.component.ts(11,42): error TS2307: Cannot find module '@pocit/ng-images/general'. projects/ng-components/src/lib/top-bar/app-information/app-information.component.ts(15,22): error TS2307: Cannot find module '@pocit/ng-images/general'. projects/ng-components/src/lib/top-bar/sign-out/change-settings/component/change-settings.component.ts(13,28): error TS2307: Cannot find module '@pocit/ng-images/general'. projects/ng-components/src/lib/top-bar/tool-bar/tool-bar.component.ts(12,23): error TS2307: Cannot find module '@pocit/ng-images/applications'. src/app/modules/components/components.component.ts(24,33): error TS2307: Cannot find module '@pocit/ng-images/applications'.

+18

html5ravi on Jan 31, 2019

`ERROR in ./src/styles.scss (./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js):

/* You can add global styles to this file, and also import other style files */ ^ Invalid CSS after “e”: expected 1 selector or at-rule, was “exports = module.ex”`

rebuild node-sass and reinstall webpack not work

+15

dongdongmao on Oct 24, 2018

npm rebuild node-sass

Run the command as administrator mode. (For whom npm rebuild node-sass not worked)

didnt worked for me

+14

budiselic on Jul 8, 2019

Nothing solved my problem yet please help

+12

RushabhBhalgat on Jul 5, 2020

simply installing node-sass helped me, npm i node-sass (before that I also removed node_modules directory, but I’m not sure if it’s necessary)

+10

mmrzk on Jul 9, 2019

@Maseeharazzack not related to sass-loader and css-loader, please read https://webpack.js.org/guides/getting-started/, seems problem in to-string-loader or ExtractTextPlugin together with to-string-loader. Please provide minimum reproducible test repo.

+10

alexander-akait on Jan 12, 2018

check node & node-sass compatability.

NodeJS | Minimum node-sass version | Node Module Node 13 | 4.13+ | 79 Node 12 | 4.12+ | 72 Node 11 | 4.10+ | 67 Node 10 | 4.9+ | 64 Node 8 | 4.5.3+ | 57

I changed the corresponding node-sass version to my nodeJs version. It worked

sjcraj on Dec 14, 2019

I had to remove node_modules folder and run npm install. Cheers!

OliveIT on May 17, 2019

@juanitaV try npm rebuild node-sass

This worked for me. Thanks 😊

ismail-dinar on Jan 25, 2021

Nothing solved my problem yet please help, too

equicy on Jul 17, 2020

npm uninstall --save-dev sass-loader npm install --save-dev sass-loader@7.1.0 solved my problem

yazansalhi on May 21, 2020

I experienced the same issue as @dongdongmao after upgrading to Angular 8 and it seems the node-sass dependency was coming from some other package (it wasn’t added in package.json). Just installing node-sass on it’s own fixed the issue -> npm install --save-dev node-sass

SergiuMaja on Jun 6, 2019

@juanitaV try npm rebuild node-sass

Thanks, it works for me too 😃 Don’t forget to relaunch your app (npm start again)

pierresis on Mar 13, 2019

For me work these steps:

$ rm -rf node_modules
$ npm ci
$ nvm install node
$ npm rebuild node-sass

IsraelTorresFullSail on Aug 19, 2020

I’ve tried all of the above but still haven’t solved with this error after ng build.

Module build failed (from ./node_modules/sass-loader/lib/loader.js): color: color($colors, text_gray); ^ Undefined variable: “$colors”.

Hyonta on Jan 28, 2020

Paste this to your package.json, this is a previous version of sass-loader

"sass-loader": "^7.1.0"
npm install

ghost on Jan 27, 2020

Remove sass first, then install it as dev dependency

npm uninstall sass or npm uninstall -g sass
npm install sass sass-loader --save-dev

This fix it for me

lance2k on Apr 4, 2023

./node_modules/css-loader/dist/cjs.js??ref–5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css

i am facing this issue

mumarse on Jun 12, 2021

Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)

Please migrate on sass from node-sass

alexander-akait on May 6, 2021

Just wanted to note that “reinstalling” and/or “rebuilding” is a workaround, NOT A SOLUTION

callowaylc on Jan 25, 2020

已收到我会尽快回复您

Received I will reply to you as soon as possible bot

LeulAria on Apr 3, 2024

downgrading react-script to ^3.4.3 solved the issue for me. good luck!

tarikulker-js on Mar 31, 2024

已收到我会尽快回复您

equicy on Jan 31, 2024

For those experiencing this problem recently, node LTS has updated from v18 to v20. This breaks legacy node-sass installs. Downgrading to node v18 fixed this for me.

theoturner on Oct 25, 2023

已收到我会尽快回复您

equicy on Oct 12, 2023

for me works only downgrade postcss-loader to v3 npm i postcss-loader@v3

rgurgul on Sep 8, 2020

npm install node-sass --save-dev solved my problem

domicoder on Jun 13, 2020

npm rebuild node-sass didn’t work for me either, the interesting thing is that this error appeared out of blue without me even changing any config files, I just Ctrl+Z a few lines of code in a component (before everything worked even without those lines of code).

mmrzk on Jul 9, 2019

@juanitaV try npm rebuild node-sass Thanks a lot this is works for me also …

Ramyapriya24 on Jan 28, 2019