Question

我在angular-cli-build

中进行了以下设置

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

我在src目录中有两个少测试文件。

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项目中编译自定义bootstrap less文件。

如何使用我的自定义lext扩展bootstrap的文件（保留在node_modules中）

Answer 1

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

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

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

npm install less --save

Answer 2

如果使用npm install less --save安装较少并重命名组件目录中的CSS文件，它应该可以正常工作。对于sass也是如此，如angular-cli文档/自述文件中所述。

我通过将other.less文件放在/shared directory中并使用完整路径导入./src/app/shared/other.less

来完成导入工作

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

现在没有错误。

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

Answer 3

创建新项目时：

ng new project_name --style less

然后当你看一下你的项目时，你会在每个组件文件夹中找到一个较少的文件，而不是一手拿css。另一方面，当你查看组件的component.ts文件时，你会在@Component中找到styleUrls：[＆＃39; ./ xxx.component **。less **＆＃ 39;]而不是[＆＃39; ./ xxx.component **。css **＆＃39;]

对于发布安装，请像@Kaspars一样说：

npm install less --save

完成后：

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

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

使用angular2 cli编译更少的文件

3 个答案: