Angular 6 - Less CSS 的导入不再起作用

Question

我想重用 Angular 5 项目中使用 Less 的一些结构。在这个旧项目中，我可以简单地.less使用组件内的这一行加载文件：

\n\n

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

\n\n

这将加载：

\n\n

/my-app/src/app/shared/less/bootstrap.less\n

\n\n

---

\n\n

现在我有一个空白的 Angular 6 项目，它也配置为使用 Less 作为预处理器：

\n\n

ng new my-app --routing --style less\n

\n\n

摘自angular.json：

\n\n

"my-app": {\n  "prefix": "app",\n  "schematics": {\n    "@schematics/angular:component": {\n      "styleext": "less"\n    }\n  },\n  "architect": {\n    "build": {\n      "options": {\n        "styles": [\n          "src/styles.less",\n          "app/shared/less/styles.less"\n

\n\n

---

\n\n

然而该行

\n\n

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

\n\n

\xe2\x80\xa6 编译时出现错误：

\n\n

\n

编译失败。
\n ./src/app/shared/component/some.component.less
\n 模块构建失败：
\n @import \'~app/shared/less/bootstrap\';
\n ^
\n \'~app/shared/less/bootstrap\' 未找到。

\n

\n\n

我也尝试过：

\n\n

@import \'.app/shared/less/bootstrap\';\n@import \'.src/app/shared/less/bootstrap\';\n@import \'~app/shared/less/bootstrap.less\';\n

\n\n

\xe2\x80\xa6 没有任何运气。

\n\n

\n\n

我是否忘记配置某些东西？

\n

Answer 1

在 Angular 6 中，您必须将import所有文件添加到主（在您的情况下src/styles.less）CSS 文件中：

仅投入angular.json：

  "styles": [
          "src/styles.less"
]

在（之前styles.less导入您想要的所有文件）：/app

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

请参阅我对 css 的回答：Angular 6 load cssfolders in angular.json

给您的编辑./src/app..：

@import './src/app/...'