使用angular2 cli编译更少的文件-Java 学习之路

我在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文件 .

我怎么能用自定义的lesses扩展bootstrap的less文件（保留在node_modules里面）

3 回答

14
打开angular-cli.json并在styles数组中插入一个新条目
```
"styles": [
    "styles.css",
    "less/app.less"
  ],
```
如果需要，安装较少 . 我不知道这是否是必需的 . 但我事先做过这件事 .
```
npm install less --save
```
回复于 2024-04-25T23:28:46+08:00
4

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

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

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

它现在没有错误 .

Edit ：它也与 @import (less) "./src/app/other.less"; 一起使用 .

回复于 2024-04-25T23:28:46+08:00
1
When creating a new project :
```
ng new project_name --style less
```
然后当你看一下你的项目时，你会在每个组件文件夹中找到一个较少的文件，而不是一方面用css . 另一方面，当你查看一个组件的component.ts文件时，你会在@Component中找到styleUrls：[' . / xxxx.component**.less**']而不是['./ xxx.component ** . CSS **']

For post install do like @Kaspars said:
```
npm install less --save
```
完成后：
- 将组件目录中的所有CSS文件重命名为less
- 在每个组件文件中通过['./xxx.component.less']更改['./xxx.component.css']
如果你想要scss而不是更少，做一些事情
回复于 2024-04-25T23:28:46+08:00

使用angular2 cli编译更少的文件

3 回答

相关问题