Webpack sass loader无法识别全局变量文件 [英] Webpack sass loader does not recognize global variables file

问题描述

我有这个sass目录:

i have this sass directory:

- _vars.scss
- main.scss

//vars.scss

//vars.scss

$base-container: 1400px;

//main.scss

//main.scss

@import './vars';

在其他js文件中，我有:

In other js file i have:

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

//some-module-sass-file.scss

//some-module-sass-file.scss

.container {
  width: $base-container;
}

问题是我在 vars文件中有全局变量，而 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:

undefined variable $base-container

推荐答案

您必须将 vars 文件导入使用这些变量的每个Sass部分中，因为每个部分都是独立编译的；除非您专门导入它们，否则所有文件都不会了解"其他文件.

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.

如果您不想在每个Sass文件中都键入 import ，则可以查看

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.

这篇关于Webpack sass loader无法识别全局变量文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！