使用〜（波浪号）导入的 SCSS 文件在 Angular 6 中不起作用

Posted 2023-02-22

【中文标题】使用〜（波浪号）导入的 SCSS 文件在 Angular 6 中不起作用

【英文标题】：SCSS file imports using ~ (tilde) is not working in Angular 6

【发布时间】：2018-12-03 07:21:11

【问题描述】：

我有两个关于 Angular6 中 scss 文件导入的问题

在全局src/sass/styles.scss 中导入一次后，我是否需要在所有component.scss 文件中导入我的部分。难道只导入一次就够了吗？ 如何使用导入快捷方式 ~ 导入 SCSS 部分？我所有的部分都包含在src/sass 文件夹中。

这很好：@import '../sass/variables';//in app.component.scss

但这会引发错误：@import '~sass/variables':

./src/app/app.component.scss 中的错误 模块构建失败： @import '~sass/变量'; ^ 找不到或无法读取要导入的文件：~sass/variables。 在 C:\Users\sandeepkumar.g\Desktop\nodebook\tdlr-this\src\app\app.component.scss （第 2 行，第 1 列）

`

angular.json:

"styles": [
              ...
              "src/sass/styles.scss"
            ],

我的文件夹结构：

【参考方案1】：

回答我自己的问题。 事实证明，这两个问题都是 Angular 6 中的“错误”。

是的，如果您想在任何component.scss 中使用任何.scss 文件代码，则必须在该component.scss 中导入它们。 Issue。 ~ (Tilda) 自Angular6 以来已停止工作。 Issue。 请改用~src 来导入 scss。

【讨论】：

这仍然是一个错误还是应该像这样工作？

他们改变了它。它的预期。

这是否意味着如果我有项目文件夹，我需要像这样使用波浪号 @import '~projects/ProjectName/src/scss/variables.scss'。这是角度错误还是一般波浪号功能错误。或者可能是 webpack 错误？

我发现这可以解决我的问题。 "stylePreprocessorOptions": "includePaths": [ "projects/ProjectName/src/scss" ] ，然后像这样包含该文件夹中的文件，不带波浪号。 @import 'variables.scss';