如何使用Less与Angular 2？

发布时间：2020-12-17 07:43:28 所属栏目：安全来源：网络整理

导读：我想知道如何可以将更少的编译添加到我的Angular 2项目中.因为每个组件都有自己的.css文件(现在将是一个.less文件),我不知道如何使文件编译成css … 我也没有找到任何解决问题的方式来解决这个问题. 编辑让我的问题更清楚：我希望对每个组件都有一个,就像

我想知道如何可以将更少的编译添加到我的Angular 2项目中.因为每个组件都有自己的.css文件(现在将是一个.less文件),我不知道如何使文件编译成css …

我也没有找到任何解决问题的方式来解决这个问题.

编辑
让我的问题更清楚：
我希望对每个组件都有一个,就像在Angular 2中的.css文件一样.我只是希望每个组件都可以预编译,因为Angular在组件之后包含css作为内联脚本是由Angular处理的,我想我需要一些较少的预处理脚本,它是否存在？

对于整个项目来说,我宁可不要有一个没有大的文件的手册,这当然是一个可能的解决方案.这个解决方案似乎与Angular环境不一致

LESS(或SASS)是CSS预处理器,因此您需要将其基本上编译成CSS.非常受欢迎的方法是使用基于 Grunt,Gulp,Brunch或 Broccoli的JavaScript任务运行器.

这是一个example直接从西兰花开始页面.

>安装节点npm install -g broccoli-cli
>在您的项目目录根目录下,安装Broccoli npm install –save-dev broccoli
>安装西兰花SASS并合并树(捆绑)插件npm install –save-dev broccoli-sass broccoli-merge-trees
>创建/编辑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

BTW：您可以轻松切换SASS的LESS

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!