scss - 不推荐在导入中使用“~” - Angular - vscode

Question

从 Angular 13 开始，使用波形符 ( ~) 从node_modules

关闭.组件.scss

:host ::ng-deep {
    // Configuration
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // Layout & components
    @import "~bootstrap/scss/close";
}

运行后会出现以下警告ng build：

警告：'C:\repos\...\src\lib\components\close\close.component.scss' 导入带有波浪号的 '~bootstrap/scss/close'。不推荐在导入中使用“~”。

更改此设置并删除波形符很容易。ctrl但是，当单击 scss 路径时，VS Code 不再找到该文件 。它认为它位于

C:\repos\...\src\lib\components\close\bootstrap\scss\close

我已经尝试过这个改变，但它没有改变任何东西。

有谁知道如何解决这一问题？

编辑

对于那些想知道为什么我们需要:host ::ng-deep围绕@import语句的人来说，它将样式范围限制在组件内。一个很好的例子是我使用的bs-list-group和 ，bs-list-group-item如下所示：

<bs-list-group>
    <bs-list-group-item>Cras justo odio</bs-list-group-item>
    <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
    <bs-list-group-item>Morbi leo risus</bs-list-group-item>
    <bs-list-group-item>Porta ac consectetur ac</bs-list-group-item>
    <bs-list-group-item>Vestibulum at eros</bs-list-group-item>
</bs-list-group>

以下 scss 导入list-group.component.scss

// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Layout & components
@import "~bootstrap/scss/list-group";

结果如下

另一方面：

:host ::ng-deep {
    // Configuration
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // Layout & components
    @import "~bootstrap/scss/list-group";
}

其中ng-deep删除组件范围，并:host替换为属性 Angular 适用于BsListViewComponent（在本例中为[_nghost-bkg-c64]）。这使得样式适用于整个BsListviewComponent，因为范围已从 css 选择器中删除。

这实际上确实有效......

Answer 1

1. 在angular.json文件中

2. 添加以下内容build -> options：

"stylePreprocessorOptions": {
   // other options...
   "includePaths": [
     "./node_modules"
   ]
 }  

3. ~在每次导入时删除

请对这一警告持保留态度：明确使用node_modules/前缀可能会更好，特别是当多个人正在处理此项目时。

Answer 2

您必须替换为 css 的路径，例如：

@import node_modules/bootstrap/scss/mixins'  

在此之前，我建议您继续要导入的引导文件并获取该文件的相对路径。

在您的 scss 文件中，将 ~ 路径替换为相对路径。

请注意路径中不要包含 .scss 文件。