Does not resolve @import. Module parse failed: Unexpected character '@'

[wzup]

The loader can't resolve @imports, throws error. Config file is just fine, but sass-loader throws errors anyhow:

ERROR in ./assets/sass/index.scss
Module parse failed: C:\Users\user\app\assets\sass\index.scss Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (2:0)

The config:

module: {
    loaders: [
        {
            test: /\.scss$/i,
            include: [
                path.resolve(__dirname, '..', 'node_modules', 'bootstrap/scss')
            ],
            loaders: [
                'css-loader?minimize',
                'sass-loader'
            ]
        },
        {
            test: /\.css$/i,
            loader: 'css-loader?-minimize',

        },
        {
            test: /\.js$/i,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', "stage-0", "react"]
            }
        }
    ]
},
sassLoader: {
    indentWidth: 4,
    outputStyle: 'expanded',
    sourceComments: true,
},
target: 'node'

Two .scss files.

index.scss:

@import "_one";

.text {
    color: red;
    font-style: italic;
}

one.scss:

.key {
    background-color: #ccc;
}

App file:

let css = require('index.scss');

Why error?

PS:

However, it works all right if I call loaders inline:

let css = require('css-loader!sass-loader!index.scss');

Why? I need a config, not inline

[wzup]

Loader's include option solved the issue.

module: {
    loaders: [
        {
            test: /\.(scss|sass)$/i,
            include: [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'path/to/imported/file/dir'), <== This solved the issue
            ],
            loaders: ["css", "sass"]
        },
    ]
},

[leongaban]

Hey I'm running into this same problem, however I added the include folder like you did above, yet still running into that error :( mind a look see here? #364

[yunda]

@wzup thanks a lot. That helped me too

[gbhipolitoglyph]

yeah i also encounter the same issue, the include doesn't solve mine

[thismax]

Here's what worked for me:

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

[nodediggity]

@thismax Thanks! This worked for me :)

[JeanHules]

This worked for me

module: {
		rules: [
			{
				enforce: 'pre',
				test: /\.jsx?$/,
				loader: 'eslint-loader',
				exclude: /node_modules/
			},
			{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' },
			{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
			{
				test: /\.scss$/,
				use: [
					{
						loader: 'style-loader'
					},
					{
						loader: 'css-loader'
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	}

[vladyn]

@thismax - thanks a lot - it solved the same issue for me!

[sudharsteyn]

Where should I add this above-mentioned module object?