javascript – Webpack sass loader无法识别全局变量文件

我有这个sass目录：

- _vars.scss
- main.scss

//vars.scss

$base-container: 1400px;

//main.scss

@import './vars';

在其他js文件中我有：

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

//some-module-sass-file.scss

.container {
  width: $base-container;
}

问题是我在vars文件中有全局变量,而some-module-sass-file无法识别它们并抛出错误：

undefined variable $base-container

解决方法

你必须将vars文件导入到使用这些变量的每个Sass部分中,因为每个部分都是自己编译的;除非您专门导入,否则所有文件都不会“了解”其他文件.

如果您不想在每个Sass文件中键入导入,可以查看baggage-loader,它将自动为您添加它们.