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

[Maseeharazzack]

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

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/assets/style.scss Module build failed: / Imported Stylesheet / ^ Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex" in D:\dev\Greater_Giving\CommunicationCenter\src\assets\style.scss (line 1, column 1) @ ./src/assets/style.scss 2:21-286

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()
]
});

[alexander-akait]

@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.

[AjayZinngg]

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

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[juanitaV]

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

[WebTechnolog]

@juanitaV try npm rebuild node-sass

[juanitaV]

@WebTechnolog , thank you! Work for me!

[dongdongmao]

`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

[dongdongmao]

and i run npm ls node-sass show

+-- @angular-devkit/build-angular@0.10.2 | -- node-sass@4.9.3 -- node-sass@4.9.4

but if i delete node-sass from my local node_modules then module not found 'node-sass'. i'm confuse

[Meetkp001]

@juanitaV try npm rebuild node-sass

Thanks this is works for me

[sushantmakin]

@juanitaV try npm rebuild node-sass

This works for me, but every time I run yarn install to fetch new packages, it again starts giving the same error and I have to rebuild node-sass again. I am using node-sass 4.10.0 and Angular 6.1.0.

[yosdanybm]

@juanitaV try npm rebuild node-sass

Thanks this is works for me...

[Ramyapriya24]

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

[JohnnyClutch]

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?

[html5ravi]

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'.

[MScevola]

@juanitaV try npm rebuild node-sass

thanks

[yosraa]

@juanitaV try npm rebuild node-sass

it works for me

[pierresis]

@juanitaV try npm rebuild node-sass

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

[roclet]

npm rebuild node-sass

Worked for me Thank you a lot my bro

[OliveIT]

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

[SergiuMaja]

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

[SrikrushnaP]

Below command work for me npm install node-sass Thanks

[Abhishek2kr]

npm rebuild node-sass

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

[budiselic]

npm rebuild node-sass

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

didnt worked for me

[mmrzk]

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]

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)

[alejoortiz18]

@juanitaV intentanpm rebuild node-sass

gracias, eso me funcionó, excelente aporte

[ihatepoper]

[help me im newbie]

ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import '~admin-lte/build/scss/aAdminLTE'; ^ Can't find stylesheet to import. ╷ 11 │ @import '~admin-lte/build/scss/aAdminLTE';

[coopeu]

yarn add node-sass doesn't work

[younes0]

None of the solutions above worked for me. I use style-loader and it happened with 1.0 versions. Reverting back to "^0.23 fixed the problem.

[sjcraj]

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

[charlesrajesh]

@sjcraj thanks for the reference. it helped me.

[callowaylc]

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

[ghost]

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

1. "sass-loader": "^7.1.0"

2. npm install

[Hyonta]

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".

[SrinivasM13]

same problem for me

[umair-murtaza]

I tried npm install --save-dev webpack and then npm install --save-dev node-sass and then sudo npm rebuild node-sass but still getting the same error Error: @extend %u-font--body; ^ ".mat-form-field" failed to @extend "%u-font--body".

[zemunkh]

Not this one:

<style>
  @import './assets/scss/app.scss';
</style>

This importing format should be as follows. Don't forget add lang="scss" scoped

<style lang="scss" scoped>
  @import './assets/scss/app.scss';
</style>

[osmaircoelho]

Maybe its solve any problem

maybe the problem is the order of loaders on webpack.config.js /.vue$/ must come first, and so on.

try this

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(woff|woff2|ttf|svg|eot)$/,
        loader: 'url-loader'
      }
    ]
  }

[jsafe00]

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

1. "sass-loader": "^7.1.0"
2. npm install

this worked for me.. thanks

[floyd70s]

if you use python 3.7 you can have problems with the comand "npm install node-sass", you can use this: "curl -o- -L https://yarnpkg.com/install.sh | bash" for install yarn and then execute: "yarn add node-sass"

i hope its work for u. -sorry for my poor translation-

[yazansalhi]

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

[sidlexx]

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

worked for me ! thanks

[domicoder]

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

[Znerf]

In my cases, it worked when I used yarn install command instead of npm install

[dasler-fw]

If nothing works from what is written on top, i will show how i fix problem: "_(module build failed (from ./nodemodules/sass-loader/dist/cjs.js)". My project was created with 'create-react-app' and i added webpack.dev.js custom config, and then i caught this problem with sass. Solve: just open your create-react-app webpack config (node-modules/react-scripts/config/webpack.config.js), cut out css, css modules and 'getStyleLoaders' function from config:

and put them to module: {rules: [cssConfig, cssModulesConfig]} in 'webpack.dev.js' file (your custom config):

Rebuild your project ('npm start') and... enjoy. Дала аьтто бойл массоа бусулбачу неха!

[RushabhBhalgat]

Nothing solved my problem yet please help

[equicy]

Nothing solved my problem yet please help, too

[Imad-MACHI]

I have just removed webpack, then reinstalled it again with the latest version, and the problem was solved

[mohammadjavadnouri]

I have the same problem after trying all the above.

please, someone, take a snapshot of their package.json so I can change the versions to the appropriate ones.

[IsraelTorresFullSail]

For me work these steps:

1. $ rm -rf node_modules
2. $ npm ci
3. $ nvm install node
4. $ npm rebuild node-sass