Less CSS 导入在 Angular 中停止工作 7 - 如何解决？

Question

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

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

在中：

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

现在 Angular 7 它又停止了:

Can't resolve './src/app/shared/less/bootstrap' …

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

Angular 7 中的核心语法是什么？

Answer 1

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

~ 是一种引用根的快速方法，以便操作 SCSS/LESS.

的路径

tilde was/is NOT officially supported 的用法实际上是构建系统内部实现的产物。

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

Less CSS import stopped working in Angular 7 - how to fix it?