首页 文章

如何在Angular 2中使用Less？

提问于
浏览 次
22

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

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

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

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

less angular

4 回答

  • 8

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

    这是从Broccoli入门页面直接采取的example .

    • 安装节点 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文件

    • Build 您的资产 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

    回复于
  • 17

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

    ng new my-first-app --style less

    All options for angular cli 'new' command

    回复于
  • 24

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

    虽然丢失了小范围的 .css 文件的优点 .

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

    回复于
  • 1

    New project

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

    ng new my-app --style less

    Existing project

    • 如果您有现有项目，则可以编辑 .angular-cli.json 文件并将 defaults.styleExt 值设置为 less . 或者您只需使用： ng set defaults.styleExt less

    • 从 mycomp/mycomp.component.css 重新命名组件的CSS文件 - > mycomp/mycomp.component.less

    • 在 mycomp/mycomp.component.ts 中更新 styleUrls ，例如 styleUrls: ['./mycomp.component.css'] - > styleUrls: ['./mycomp.component.less']

    Resource

    回复于

相关问题