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

@import './vars';

In other js file i have:

require('./some-module-sass-file');

//some-module-sass-file.scss

.container {
  width: $base-container;
}

The problem is i have global variables in the vars file and the some-module-sass-file not recognize them and throw an error:

undefined variable $base-container

Answer 1

Without using sass-resources-loader:

Thanks to @Arseniy-II for helping me get to this answer, in conjunction with this thread: https://github.com/webpack-contrib/sass-loader/issues/218

Using loader options in your webpack module rules, you can assign a data property to sass-loader, you should then be able to use all sass functions as expected:

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            data: '@import "path/to/global.scss";',
            includePaths:[__dirname, 'src']
          },
        },
      ],
    },
  ],
}