Less 如何使用较少的角度2？

我想知道如何在Angular 2项目中添加更少的编译。由于每个组件都有自己的.css文件（现在将是

.less

文件），我不确定如何将该文件编译为css

我也用谷歌搜索了这个问题，但没有找到任何解决问题的方法

编辑

让我的问题更清楚： 我希望每个组件都有一个

.less

，就像Angular 2中的

.css

文件一样。我只希望每个

.less

都被预编译，因为Angular在Angular处理组件后将css作为内联脚本包含在内，我想我需要一些较少的预处理脚本，它存在吗

对于整个项目，我不希望有一个大的

。小的
文件包含在手册中，这当然是一个可能的解决方案。虽然……
LESS（或SASS）是CSS预处理器，但这个解决方案似乎不符合Angular环境，因此您需要将它们编译成CSS。一种非常流行的方法是使用JavaScript任务运行程序，如based，or

这是直接从西兰花入门页面上截取的

安装节点
npm安装-g brocoli cli
在项目根目录中，安装brocoli
npm安装——保存dev brocoli
安装花椰菜SASS和合并树（捆绑）插件
npm安装--保存开发花椰菜SASS花椰菜合并树
创建/编辑Brocfile.js文件
构建您的资产
西兰花构建区
示例Brocfile.js文件

 /* Brocfile.js */

// Import some Broccoli plugins
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');

// Specify the Sass and Coffeescript directories
var sassDir = 'app/scss';

// Tell Broccoli how we want the assets to be compiled
var styles = compileSass([sassDir], 'app.scss', 'app.css');

// Merge the compiled styles and scripts into one output directory.
module.exports = mergeTrees([styles, scripts]);enter code here

顺便说一句：您可以轻松地将SASS切换为更少的您仍然可以使用一个
.css
，它包含所有组件的所有样式规则，并在每个组件中导入相同的
.css
文件（您必须使用选择器/标记名而不是
：host{
）。浏览器会缓存文件，因此只下载一次

但是，小范围
.css
文件的优势已经丧失

我不知道更少，但对于SASS，我目前正在处理一个自定义导入器，其中导入路径可以以id/名称作为前缀，自定义导入器在本地检查是否定义了该id/名称的覆盖，并返回该覆盖，否则导入将返回默认值。

通过这种方式，组件创建者可以提供覆盖钩子，用户可以在其中传递自己的变量、mixin等，而不是在构建时传递默认值。
如果您正在创建一个新的应用程序，请在应用程序名称之后添加
--style
以选择预处理器

ng new my-first-app --style less

新项目

您可以使用
--style
标志来设置CSS预处理器

ng new my-app --style less

现有项目

如果您有一个现有项目，那么您可以编辑
.angular cli.json
文件并将
默认值设置为
less
。或者您可以使用：
ng set defaults.styleExt less

从
mycomp/mycomp.component.CSS
->
mycomp/mycomp.component.less
在
mycomp/mycomp.component.ts
中更新
styleUrls
，例如
styleUrls:['./mycomp.component.css']
->
styleUrls:['./mycomp.component.less'.
我在angular 2中处理可维护的CSS时也遇到了同样的问题，主要是因为推荐的文件夹结构。我最终构建了我正在使用的这个库：谢谢，但是如何处理现有的CSS文件，我们是否需要将所有CSS文件更改为更少？