Module build failed (from ./node_modules/sass-loader/lib/loader.js):

[Hiroki111]

• Operating System: CentOS 7
• Node Version: 10.15.1
• NPM Version: 6.9.0
• webpack Version:^ 4.33.0
• sass-loader Version: ^7.1.0

Expected Behavior

Loading scss to a React component

Actual Behavior

It throws an error after running webpack

The message is

ERROR in ./resources/js/components/Navigation/styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/sass-loader/lib/loader.js!./resources/js/components/Navigation/styles.scss)

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

Expected "{".

var content = require("!!../../../../node_modules/css-loader/dist/cjs.js??ref--13-1!../../../../node_modules/sass-loader/lib/loader.js!./styles.scss");

I removed node-modules and re-installed style-loader, css-loader, sass-loader but the error still persists.

Then, I found this post and installed node-sass too, but nothing changed.

After that, I found this, so I tried npm install --save-dev webpack and npm rebuild node-sass too, but none of the worked either.

Code

index.tsx

import * as React from 'react';
import './styles.scss';

const Navigation = () => {
    return (<div className="app-bar"></div>)
}
export Navigation;

styles.scss
.app-bar { background-color: #2196f3; }

module.exports = {
	devtool: "inline-source-map",
	entry: './resources/js/index.tsx',
	resolve: {
		extensions: ['.*', '.js', '.jsx', '.ts', '.tsx'],	
	},
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'public/js')
	},
	module: {
		rules: [{
			test: /\.(js|jsx)?$/,
			loader: "babel-loader",
			exclude: /node_modules/
		}, {
			test: /\.(ts|tsx)?$/,
			use: [{ loader: 'ts-loader' }],
			exclude: /node_modules|\.d\.ts$/
		}, {
			test: /\.(css|scss)$/,
			use: [
				{ loader: 'style-loader' },
				{
					loader: 'css-loader',
					options: {
						modules: true
					}
				},
				{ loader: 'sass-loader' }
			]
		}]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		}),
		new CleanWebpackPlugin(),
	]
}

[alexander-akait]

Problem in your syntax, please create minimum reproducible test repo

[Hiroki111]

@evilebottnawi
Which syntax, scss or javascript (webpack.config.js)?

[Hiroki111]

I just needed to use MiniCssExtractPlugin.loader rather than style-loader.

i.e.

                test: /\.scss$/,
		use: [{
			loader: MiniCssExtractPlugin.loader,
		}, {
			loader: "css-loader",
		}, {
			loader: "sass-loader",
			options: {
				implementation: require("sass"),
				fiber: Fiber
			}
		}]

Hope this will help someone.