更少的 CSS 导入在 Angular 7 中停止工作 - 如何修复它？答案

【问题标题】：Less CSS import stopped working in Angular 7 - how to fix it?更少的 CSS 导入在 Angular 7 中停止工作 - 如何修复它？
【发布时间】：2019-04-24 21:46:35
【问题描述】：

在 Angular 5 中，我将 bootstrap.less 导入到组件的任何 less 文件中：

@import '~app/shared/less/bootstrap';

在Angular 6 I updated this to:

@import './src/app/shared/less/bootstrap';

现在有了 Angular 7，它又停止了：

无法解析“./src/app/shared/less/bootstrap”……

基本上，我有一个 Less CSS 文件，其中包含一些位于 /src/app/shared/less/ 中的 mixins 和变量。我想在任何组件的 Less CSS 文件中使用这个文件，因此必须导入它，以访问包含的 mixins。

Angular 7 中正确的语法是什么？

【问题讨论】：

在 Angular 7 中你可以使用 ~src
@nircraft 谢谢，帮助很大。您可以将此添加为答案吗？另外，你知道他们为什么改变它以及波浪号的作用吗？

标签： angular import less angular7

【解决方案1】：

您可以使用~src/app/shared/less/bootstrap 导入引导程序或使用相对路径导入ex：../../shared/less/bootstrap（取决于您的项目结构）。

~ 是一种快速引用 root 以操作 SCSS/LESS 路径的方法。

tilde 的用法是/现在不是 officially supported，实际上是构建系统内部实现的产物。

虽然它目前可能在某些情况下有效，但不能保证将来继续有效。在上述样式用例中，建议使用相对路径或使用 includePaths 选项 (more details)。

【讨论】：