cannot make includePath option working fine

[zabojad]

Hi !

I'm getting this when launching my webpack dev server:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/page/#Page/styles.scss
Module build failed: 
@import 'boxes';
^
      File to import not found or unreadable: boxes.
Parent style sheet: stdin
      in /Users/thomasfetiveau/wksp/my-ptoject/src/page/#Page/styles.scss (line 1, column 1)
 @ ./src/page/#Page/styles.scss 4:14-130
webpack: bundle is now VALID.

And here is my conf:

var path = require('path');

module.exports = {
	entry: './src/index-web.js',
	output: {
		path: './app',
		filename: 'index.js'
	},
	devServer: {
		inline: true,
		port: 8080,
		historyApiFallback: true,
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel',
				query: {
					presets: ['es2015', 'react']
				}
			},
			{
				test: /\.json$/,
				exclude: /node_modules/,
				loader: 'json'
			},
			{
                test: /\.scss$/,
                loaders: [ 'style', 'css', 'sass' ],
            }
		]
	},
    sassLoader: {
        includePaths: [
        	path.resolve(__dirname, 'app/styles')
        ]
    },
}

Where did I make a mistake ?

[zabojad]

I've observed very odd behaviors:

• First, if I change my webpack config to the one proposed in the README (ie, via the rules node), sass will simply not work at all (parser error, no loader found for this...).

• @import statements work with relative pathes.

Here are the versions I'm using:

    "css-loader": "0.27.3",
    "json-loader": "0.5.4",
    "node-sass": "4.5.0",
    "sass-loader": "6.0.3",
    "style-loader": "0.14.1",
    "webpack": "2.2.1"

[zabojad]

I've just succeeded in making it work with inline loader configuration (+ webpack 1 config style):

module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel',
				query: {
					presets: ['es2015', 'react']
				}
			},
			{
				test: /\.json$/,
				exclude: /node_modules/,
				loader: 'json'
			},
			{
                test: /\.scss$/,
                loaders: [ "style-loader", "css-loader?sourceMap", 'sass-loader?{"sourceMap":true,"includePaths":["app/styles"]}' ],
            }
		],
	},

Why the hell the "modern" way to do this doesn't work ? ie, with the rules node?

[alexander-akait]

@zabojad Is there a problem or has it been solved? If not can your create minimal reproducible test repo?

[alexander-akait]

@zabojad friendly ping

[dovidweisz]

I am encountered the same issue when upgrading sass-loader from 4.1.1 to 5.0.0.

I use includePaths to tell my modules where to find foundations mixins etc.

When using the LoaderOptionsPlugin method to set my node-sass options, it could not find my dependencies. As @zabojad mentioned above, stringifying my options and passing them inline to the loader fixed this issue.

{
	test: /\.scss$/,
	loaders: [`sass-loader?${nodeSassOptions}`],
}

I wonder if includePaths is the only option that doesn't work with LoaderOptionsPlugin, or are there other options (sassFunctions?) that are also broken.

[alexander-akait]

@dovidweisz please update to latest sass-loader version

[dovidweisz]

@evilebottnawi i just did.

I updated to 6.0.5 and am still experiencing the same issue. ☹️

[alexander-akait]

@dovidweisz can your provide config or best minimal reproducible test repo?

[dovidweisz]

@evilebottnawi Here you go:

https://github.com/dovidweisz/todomvc-angular-4

upgrade sass-loader to the latest version and watch it break 😄

[alexander-akait]

@dovidweisz config is very unreadable.
Also build and start is working good for me.
Don't recommend use options as query argument. Please refactor your webpack config.

Also var sassOptions = getLoaderConfig(this); console.log(sassOptions); inside sass-loader output:

includePaths: [ '/paht/to/todomvc-angular-4/src/scss']

Which mean all options are respected inside sass-loader, your can have invalid @import 'something' in your styles.

[alexander-akait]

Sorry but not related to sass-loader, also we have tests on includePaths option. Also you can notice below config is not right way, just use options property for each loader in your rules.

[alexander-akait]

@zabojad

loaders: [ "style-loader", "css-loader?sourceMap", 'sass-loader?{"sourceMap":true,"includePaths":["app/styles"]}' ],
            }
		],

Refactor to

{
  test: /\.s[ac]ss$/,
  use: [
    {
        loader: "style-loader",
        options: {} // your can avoid `options` if your don't have these
    },
    {
        loader: "css-loader",
        options: {} // your can avoid `options` if your don't have these
    },
    {
        // Your also can avoid this loader if your don't need
        loader: "postcss-loader",
        options: {} // your can avoid `options` if your don't have these
    },
    {
        loader: "sass-loader",
        options: {} // your can avoid `options` if your don't have these
    }
  ]
}

[dovidweisz]

@evilebottnawi

I created this repo (read as two hours of my employers time) specifically to show you this issue. Please don't close it because you could't reproduce the issue.

If you would look at the package.json you would see that sass-loader is at version 4.1.1.

The idea was that you would:

1. Build the project and see that its working
2. modify package.json like so:

-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.5",

3. run npm install
   4 re run the build and see that it's broken

For your convenience i created a branch with this change https://github.com/dovidweisz/todomvc-angular-4/tree/upgrade-sass-loader