Question

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

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

这将加载：

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

现在我有一个空白的Angular 6项目，该项目还配置为使用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';

…编译时出现错误：

无法编译。
  ./src/app/shared/component/some.component.less
  模块构建失败：
  @import'〜app / shared / less / bootstrap';
   ^
  找不到'〜app / shared / less / bootstrap'。

我也尝试过：

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

...没有任何运气。

我忘了配置一些东西吗？

Answer 1

在角度6中，您必须import将所有文件都保存到主要的css文件中（在您的情况下，src/styles.less）：

在angular.json中仅输入：

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

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

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

在此处查看我对CSS的回答：Angular 6 load css folders in angular.json

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

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

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

1 个答案: