sass-loader prepend @import

0
votes

Trying to prepend global styles imports to each *.scss file. my relevant webpack config is

{
    test: /\.scss$/i,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                sassOptions: {
                    includePaths: [
                        path.resolve(__dirname, 'path-to-global-style-dir'),
                    ],
                },
                prependData: `        
                    @import "${path.resolve(__dirname, 'path-to-global-style.scss')}";
                `,
            },
        },
    ],
},

I'm getting the following error -

SassError: Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"

I'm using webpack 4.42.1, sass-loader 8.0.2

anyone knows how to fix this error? or has other approaches on prepending imports to each .scss file?

thanks

1
javascriptwebpacksass-loader

1 Answers

0
votes

Who ever stumble across this question,

I solved it by changing the .scss file name to something unique.

before it was "base", and I had a base.js somewhere inside /node_modules/ and the import resolved it instead of my desired .scss file.