Webpack sass loader does not recognize global variables file

Question

i have this sass directory:

- _vars.scss
- main.scss

//vars.scss

$base-container: 1400px;

//main.scss

Answer 1

Webpack 4 solution:

{
    loader: 'sass-loader', options: {
        sourceMap: true,
        prependData: '@import "pathto/vars";'
    },
}

In order @import "pathto/vars"; to work you need Webpack to configure to resolve such imports. So it simply prepends the line.

This solution is good because you have no issues with sourcemaps like with using sass-resources-loader