¿Cómo usar Less con Angular 2?

angular 6 less

Question

Me gustaría saber cómo puedo agregar menos compilación a mi proyecto Angular 2. Debido a que cada componente tiene su propio archivo .css (que ahora será un archivo .less) no estoy seguro de cómo podría compilar el archivo a css ...

También he buscado en Google el problema sin encontrar ninguna solución a mi problema.

EDITAR Para que mi pregunta sea más clara: me gustaría tener una .less para cada componente, tal como está por defecto con los archivos .css en Angular 2. Sólo quiero que cada .less sea precompilado, y porque Angular está incluida el css como script en línea después de que Angular haya procesado el componente, supongo que necesito algún script de preprocesamiento inferior en el medio, ¿existe?

Preferiría no tener un gran archivo .less incluido en el manual para todo el proyecto, lo que, por supuesto, sería una posible solución. Esta solución parece no estar en línea con el entorno Angular aunque ...

Answer 1

Aún puede usar un único .css que contenga todas las reglas de estilo para todos sus componentes e importar el mismo archivo .css en cada componente (debe usar el nombre del selector / etiqueta en lugar de :host { ). El navegador almacena en caché el archivo de todas formas, por lo que solo lo descargará una vez.

Sin embargo, la ventaja de los archivos .css ámbito pequeño se pierde.

No conozco Menos, pero para SASS Actualmente estoy trabajando en un importador personalizado donde las rutas de importación se pueden prefijar con un ID / nombre y el importador personalizado se comprueba localmente si se define un reemplazo para ese ID / Nombre y lo devuelve De lo contrario, la importación vuelve al valor predeterminado.
De esta manera, el creador de componentes puede proporcionar enlaces de anulación donde el usuario puede pasar sus propias variables, combinaciones, ... en lugar del valor predeterminado en el momento de la compilación.

Answer 2

MENOS (o SASS) son preprocesadores de CSS, por lo que necesitará compilarlos esencialmente en CSS. Una forma muy popular es utilizar un ejecutor de tareas de JavaScript como Grunt , Gulp , Brunch o Broccoli .

Aquí hay un example tomado directamente de la página de inicio de Broccoli.

1. Instala el nodo npm install -g broccoli-cli
2. Dentro de la raíz del directorio de su proyecto, instale Broccoli npm install --save-dev broccoli
3. Instale el SASS de brócoli y npm install --save-dev broccoli-sass broccoli-merge-trees complementos de npm install --save-dev broccoli-sass broccoli-merge-trees
4. Crear / Editar un archivo Brocfile.js
5. Construye tus activos broccoli build dist

Ejemplo de archivo 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: Puedes cambiar SASS fácilmente por MENOS

Answer 3

Si está creando una nueva aplicación, justo después del nombre de la aplicación agregue --style para elegir su preprocesador.

ng new my-first-app --style less

Todas las opciones para el comando cli ''nuevo'' angular

Answer 4

Nuevo proyecto

Puede utilizar el indicador de estilo - para establecer un preprocesador CSS

ng new my-app --style less

Proyecto existente

1. Si tiene un proyecto existente, puede editar el archivo .angular-cli.json y establecer el valor defaults.styleExt en less . O puede usar simplemente use: ng set defaults.styleExt less
2. Cambie el nombre del archivo CSS de un componente desde mycomp/mycomp.component.css -> mycomp/mycomp.component.less
3. Actualice styleUrls en mycomp/mycomp.component.ts , por ejemplo styleUrls: [''./mycomp.component.css''] -> styleUrls: [''./mycomp.component.less'']

Resource