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

Short answer:

https://github.com/shakacode/sass-resources-loader

Long answer:

sass-resources-loader allow to use variables, mixins etc in each required sass file.

So you can have your variables in vars.scss:

$main: #073288; 
$secondary: #F6A906;

And then use them as usual:

.my-component {
    background-color: $main;
    color: $secondary;
}

All you need to do is

1. Install sass-resources-loader: npm install sass-resources-loader --save-dev

2. And configure you webpack.config:

{
    loader: 'sass-resources-loader',
    options: {
        resources: './path/to/vars.scss'
    }
}

Here is example from github

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
}

If you have problems with path to resources try to use path like this:

• const path = require('path')
• resources: [path.resolve(__dirname, './../vars.scss')]
• __dirname is avaliable inside you webpack.config without requiring it.