使用 angular2 cli 编译更少的文件答案

【问题标题】：compiling less file using angular2 cli使用 angular2 cli 编译更少的文件
【发布时间】：2016-06-22 19:18:18
【问题描述】：

我在 angular-cli-build 中进行了以下设置

Angular2App(defaults,{
 lessCompiler: {
     includePaths: [
       'src/app'
      ],
   }
})

src 目录中有两个 testless 文件。

test1.less

//some code

test2.less

@import "test1.less";

当我ng build该项目时，它会引发错误

Build failed.
File: input (1)
The Broccoli Plugin: [LESSPlugin] failed with:
undefined

我已经尝试过issue 873 临时解决方案。错误消失了。但找不到任何已编译的 css 文件。请帮忙。如何在由 angular-cli 构建的 angular2 项目中编译自定义引导程序更少的文件。

如何使用自定义的 lesses 扩展引导程序的 less 文件（留在 node_modules 中）

【问题讨论】：

标签： angular less angular-cli

【解决方案1】：

打开 angular-cli.json 并在样式数组中插入一个新条目

"styles": [
    "styles.css",
    "less/app.less"
  ],

如果需要，请减少安装。我不知道这是否需要。但我事先已经这样做了。

npm install less --save

【讨论】：

适用于 1.0.0-beta.25.5。不需要显式安装。
我确实需要安装较少

【解决方案2】：

如果您使用 npm install less --save 安装 less 并重命名组件目录中的 CSS 文件，它应该可以工作。如angular-cli 文档/自述文件中所述，对 sass 的工作方式相同。

我通过将other.less 文件放入/shared directory 并使用完整路径./src/app/shared/other.less 导入它来完成导入工作

@import (less) "./src/app/shared/other.less";

它现在可以正常工作了。

编辑：它也可以与@import (less) "./src/app/other.less";一起使用。

【讨论】：

我做了他们文档中描述的事情。但它不工作。仅生成其中没有任何内容的 css 文件。（空的）。你试成功了吗？请告诉我。 @JS_astronauts
我用ng new lesstest 开始了一个新项目，它对我有用，首先我尝试使用node-sass，后来我用less 对其进行了测试。它有效，我不必进入`angular-cli-build`，.css 文件在dist/app/ 中编译
如果@import 在您的设置中有效，请尝试一下？
但是这又产生了另一个问题。如果@import 不采用相对路径，我怎么能用我的自定义lesses 扩展引导程序的less 文件（留在node_modules 中）？我的意思是引导较少的文件已写入相对路径。

【解决方案3】：

创建新项目时：

ng new project_name --style less

然后，当您查看您的项目时，您会发现每个组件文件夹中的文件较少，而不是一方面的 css 文件。而另一方面，当你查看一个组件的 component.ts 文件时，你会在@Component 中找到 styleUrls: ['./xxx.component**.less**'] 而不是 ['./ xxx.component**.css**']

对于后期安装，请像 @Kaspars 所说的那样：

npm install less --save

完成后：

将组件目录中的所有 CSS 文件重命名为 less
在每个组件文件中将 ['./xxx.component.css'] 更改为 ['./xxx.component.less']

如果你想要 scss 而不是更少，做一些事情

【讨论】：