Webpack sass loader does not recognize global variables file

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

You have to import the vars file into every Sass partial that uses those variables, because every partial is compiled on its own; none of the files will 'know about' the others unless you specifically import them.

If you don't want to have to type the imports in every Sass file, you can look at baggage-loader, which will automatically add them for you.

Note that you need to use " and ; at the end

{
    loader: 'sass-loader',
    options: {
        additionalData:'@import "path/to/general.sass";',
    },
},