Webpack sass loader does not recognize global variables file

[NetanelBasal]

I have this sass directory:

• _vars.scss
• main.scss

//main.scss

@import './vars';

In other js file i have:

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

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

[fxck]

same problem, have you found any solution?

[NetanelBasal]

You need to require the file in every file you need him.

[silvenon]

Yes, this is the only way. It doesn't work because variables work only within @imported Sass files. Just have a _globals.scss file with variables, functions etc. that you @import in each Sass file.

This is better anyway, because now each save won't cause all Sass files to recompile, just the file you changed.

[andrewmclagan]

although the problme with that is we end up with nest head fuck...:

"../../../../../src/_varibles.scss"

if we restructure our directories.. BOOM!

[jerrylau91]

ran into the same problem! this is so un-convenient!

[silvenon]

You could perhaps set the includePath to the directory where your stylesheet is, then import simply with @import 'variables'?

[natchiketa]

I'm adding @import 'variables' using data:

  sassLoader: {
    data: '@import "variables";',
    includePaths: [
      path.resolve(__dirname, "./app")
    ]
  }

[evanjmg]

Any full examples on this? I can't get this working with the examples given.

[silvenon]

@evanjmg does this help?

[evanjmg]

No. I'm not given the file structure, @import statement, nor variable. This is only useful for node modules not including a global variables file like _variables.scss

[natchiketa]

@evanjmg That's exactly what my example does—add an import for every Sass file to a file called _variables.scss. As long as _variables.scss is in one of the paths in the includePaths array, it should work.

Beyond that I'd need to know more about your setup, such as:

• The contents of your webpack config file
• Where that config file is located relative to the project root
• Where your _variables.scss is located relative to the project root

[evanjmg]

I'm using webpack 2.1.0-beta.27 and sass loader 4.1.1 doing the following:

webpack.config.js

 loader: 'sass-loader' + SOURCE_MAP_STRING,
              options: {
                data: '@import "variables";', // I tried _variables as well
                includePaths: [path.resolve(__dirname, "src")],
                outputStyle: 'compressed',
                sourceMap: true,
                outFile: 'style.css'
              }

scss file in src/app/styles/partials/_variables.scss:
$white: #fff
and in other part of app in
src/guests/component.scss:

@import 'variables'; // get error cannot find module variables 
.guest {
   color: $white; // without @import 'variables' at the top of this file - I get $white is not defined
}

Importing relatively works fine, but I can't get these globals to work.

[silvenon]

What is SOURCE_MAP_STRING? Are you sure that you're applying options correctly?

[natchiketa]

@evanjmg Couple of things: first, although it shouldn't be an issue, since the docs say you can put the options there—I am putting them in an object called sassLoader, at the root of my webpack config's exports, like this:

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "./some-folder")]
  }
};

The second thing is what I think is causing it to not work for you. The @import statement needs to use a path relative to one of the includePaths paths. For example, if your _variables.scss is at src/app/styles/partials/_variables.scss, and your current includePaths only has src, then the @import has to be like this: @import('./app/styles/partials/variables');. It's not just going to automatically traverse the entire tree.

Try something like this:

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  sassLoader: {
    data: '@import "variables";',
    includePaths: [
      path.resolve(__dirname, "./src/app/styles/partials")
    ]
  }
};