CODEWITHSUNDEEP
webpackbourbonsass-loaderextracttextwebpackplugin
Andy Farmer
Andy Farmer

Reputation: 11

Webpack 3, Extract Text plugin not resolving sass-loader includePaths

I have this setup working on an older project using:

[email protected]
[email protected]

I'm now trying on a new project so have upgraded to:

[email protected]
[email protected].

Webpack config is exactly the same but now I'm getting errors.

I'm using node-bourbon and I'm wanting to make it available across all my entries rather having to import it each time.

I have a SCSS file: stylesheets/tools/mixins/bourbon.scss that (should) simply import bourbon: @import 'bourbon';

Then I'm using sass-resources-loader to make that (along with some other mixins) available across all modules (see config below).

webpack config: { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [ ... { loader: "sass-loader", options: { sourceMap: true, includePaths: require('bourbon').includePaths } }, { loader: 'sass-resources-loader', options: { resources: [ './frontend/stylesheets/settings/*.scss', './frontend/stylesheets/tools/**/*.scss' ] }, }, ] }) },

However the import statement in the SCSS file is not resolving to node_modules, it tries to reference itself so I get this error: Module build failed: @import 'bourbon'; ^ An @import loop has been found:

It seems the includePaths for node-bourbon are being ignored?

UPDATED:

I've managed to work around for now by referencing bourbon directly: @import '~bourbon/app/assets/stylesheets/_bourbon';

Not ideal, but it does the job.

Interestingly when I include bourbon @import 'bourbon'; in a file that isn't declared in the sass-resources-loader it works. Perhaps ExtractTextPlugin doesn't pass the includePaths from sass-loader to modules referenced in sass-resource-loader.

Upvotes: 1

Views: 986

Answers (1)

whmii
whmii

Reputation: 440

I'm not positive but I believe includepaths has to be an array, even if there's only 1 entry.

Also bourbon and bourbon-neat are the official pagkages so you may have better luck with those and not node-bourbon.

Edit to clarify:

You would need to enter the following for the options → 

            options: {
              sourceMap: true,
              includePaths: [require('bourbon').includePaths]
            }

Upvotes: 1

Related Questions