Webpack sass 加载器无法识别全局变量文件 [英] 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 ，可以查看 baggage-loader，它会自动为你添加它们.

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 加载器无法识别全局变量文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！