Angular 6-更少的CSS导入不再起作用 [英] Angular 6 - Less CSS' import is not working anymore

问题描述

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

I wanted to re-use some structure from an Angular 5 project which uses Less. In this old project I could simply load .less files using this line from within a component:

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

这将加载:

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

---

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

---

Now I have a blank Angular 6 project, which is also configured to use Less as a preprocessor:

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

从angular.json 中提取:

Extract from angular.json:

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

---

但是行

---

However the line

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

…编译时出现错误:

无法编译.
./src/app/shared/component/some.component.less
模块构建失败:
@import'〜app/shared/less/bootstrap';
^
找不到'〜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';

...没有任何运气.

… without any luck.

我忘了配置一些东西吗?

Did I forget to configue something?

推荐答案

在angular 6中，您必须import所有文件都保存到主css文件(在您的情况下为src/styles.less):

In angular 6 you have to import all files to main(in your case src/styles.less) css file :

在angular.json中仅放置:

In angular.json put ONLY:

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

在styles.less中(在app之前用/导入所需的所有文件):

In styles.less (import all files you want with / before app):

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

在此处查看我对CSS的回答: Angular 6在angular.json中加载css文件夹

See my answer to css here:Angular 6 load css folders in angular.json

要进行编辑./src/app..:

To your edit ./src/app..:

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

这篇关于Angular 6-更少的CSS导入不再起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！