Angular 6 - Less CSS' 导入不再有效

Question

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

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

这将加载：

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

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

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

摘自angular.json:

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

不过行

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

…编译出错：

Failed to compile.
./src/app/shared/component/some.component.less
Module build failed:
@import '~app/shared/less/bootstrap';
^
'~app/shared/less/bootstrap' wasn't found.

我也试过：

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

……运气不好。

我是不是忘记配置什么了？

Answer 1

在 angular 6 中，您必须 import 所有文件到主文件（在您的情况下 src/styles.less） css 文件 :

在angular.json中只输入：

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

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

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

在这里查看我对 css 的回答：

您的编辑./src/app..:

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

Angular 6 - Less CSS' 导入不再有效

Angular 6 - Less CSS' import is not working anymore

javascript

css

less

angular