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

Question

I have this setup working on an older project using:

webpack@3.0.0
extract-text-webpack-plugin@2.1.2

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

webpack@3.8.1
extract-text-webpack-plugin@3.0.1.

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.

score 1 · Answer 1 · answered Oct 19 '17 at 15:35

1

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]
            }

answered Oct 19 '17 at 15:35

whmii

430
2
10

1

Thanks for your response. You're right that it needs to be an array but bourbon returns an array so that should be fine: ```module.exports = { includePaths: [ path.join(__dirname, 'app/assets/stylesheets') ] };```. I've managed to find a workaround for now so not to worry. – Andy Farmer Oct 23 '17 at 08:24

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

1 Answers1