Angular 14库中定义的Sass变量无法在应用中使用，是否可导入？

为什么变量无法使用 #

你用@import url('my-lib/styles.scss');导入样式时，Sass会将其视为原生CSS的导入语法，只会引入编译后的CSS内容，不会解析原文件中的Sass变量（$test-variable这类属于Sass预处理器特性），所以应用里找不到这个变量。

可行的解决方法 #

方法1：改用Sass原生@import语法 #

去掉url()，直接用Sass的导入方式：

@import 'my-lib/styles.scss';

这样Sass会完整解析库中的styles.scss文件，变量和CSS类都能正常使用。但要注意，这种方式会把库中styles.scss里的所有CSS规则也一并导入到当前文件中，可能导致样式重复。

方法2：单独抽离变量文件（推荐） #

在你的my-lib库中，把变量单独放到一个专门的文件（比如_variables.scss）：

// my-lib/_variables.scss
$test-variable: lightgreen;

然后在库的styles.scss中导入这个变量文件：

// my-lib/styles.scss
@import './_variables.scss';

.test-css-class {
    background-color: lightblue;
}

之后在Angular应用中，就可以单独导入变量文件来使用变量：

@import 'my-lib/_variables.scss';

.test {
    background-color: $test-variable;
}

这种方式能避免引入不必要的CSS类，同时更清晰地管理变量依赖。

内容的提问来源于stack exchange，提问作者Jacques Ung