Question

我想知道如何为Angular 2项目添加更少的编译。因为每个组件都有自己的.css文件（现在它将是.less文件）我不知道如何将文件编译成css ...

我也搜索了这个问题而没有找到解决问题的方法。

EDIT 让我的问题更清楚：我希望每个组件都有一个.less，就像它在Angular 2中的.css文件一样默认。我只想要每个.less都要预编译，并且因为Angular将css包含在组件之后的内联脚本中由Angular处理，我想我需要一些较少的预处理脚本，它是否存在？

对于整个项目，我宁愿没有一个大的.less文件包含手册，这当然是一个可能的解决方案。虽然这个解决方案似乎不符合Angular环境......

Answer 1

新项目

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

ng new my-app --style less

现有项目

如果您有现有项目，则可以修改.angular-cli.json文件并将defaults.styleExt值设置为less。或者您可以使用：ng set defaults.styleExt less
从mycomp/mycomp.component.css重新命名组件的CSS文件 - ＆gt; mycomp/mycomp.component.less
更新styleUrls中的mycomp/mycomp.component.ts，例如styleUrls: ['./mycomp.component.css'] - ＆gt; styleUrls: ['./mycomp.component.less']

Resource

Answer 2

如果您要创建新应用，请在应用名称后添加--style以选择预处理器。

ng new my-first-app --style less

All options for angular cli 'new' command

Answer 3

LESS（或SASS）是CSS预处理器，因此您需要将它们基本上编译为CSS。一种非常流行的方法是使用基于Grunt，Gulp，Brunch或Broccoli的JavaScript任务运行器。

这里有example直接从Broccoli入门页面。

安装节点npm install -g broccoli-cli
在项目目录root中，安装Broccoli npm install --save-dev broccoli
安装Broccoli SASS并合并树（捆绑）插件npm install --save-dev broccoli-sass broccoli-merge-trees
创建/编辑Brocfile.js文件
构建资源broccoli build dist

示例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以获得

Answer 4

您仍然可以使用包含所有组件的所有样式规则的单个.css，并在每个组件中导入相同的.css文件（您必须使用选择器/标记名称而不是{ {1}}）。浏览器无论如何都会缓存文件，因此它只会下载一次。

虽然小范围:host {文件的优点已经丢失。

我不了解Less但是对于SASS我当前正在开发一个自定义导入器，其中导入路径可以带有id / name前缀，并且自定义导入器在本地检查是否覆盖了该id / name已定义并返回此值，否则导入将恢复为默认值这样组件的创建者可以提供覆盖挂钩，用户可以在其中传递自己的变量，mixin，而不是构建时的默认值。

如何在Angular 2中使用Less？

4 个答案: