Làm thế nào để sử dụng Less với Angular 2?

Question

Tôi muốn biết làm thế nào tôi có thể thêm ít biên dịch cho dự án Angular 2 của tôi. Bởi vì mỗi thành phần có tệp .css riêng của nó (mà bây giờ sẽ là một tệp .less) Tôi không chắc chắn về cách tôi có thể làm cho tệp biên dịch thành css ...

Tôi cũng đã giải quyết vấn đề mà không tìm thấy bất kỳ giải pháp nào cho vấn đề của tôi.

EDIT Để làm cho câu hỏi của tôi rõ ràng hơn: Tôi muốn có một .less cho mỗi thành phần, chỉ vì nó là như mặc định với các tập tin .css ở góc 2. Tôi chỉ muốn mỗi .less được biên dịch sẵn , và bởi vì Angular bao gồm css như kịch bản nội tuyến sau khi thành phần được xử lý bởi Angular, tôi đoán rằng tôi cần một số kịch bản tiền xử lý ít hơn ở giữa, nó tồn tại?

Tôi không muốn có một tệp .less lớn bao gồm hướng dẫn sử dụng, cho toàn bộ dự án, tất nhiên sẽ là giải pháp khả thi. Giải pháp này dường như không có nội tuyến với môi trường Góc mặc dù ...

Answer 1

LESS (hoặc SASS) là các bộ tiền xử lý CSS, do đó bạn cần biên dịch chúng thành CSS. Một cách rất phổ biến là sử dụng một nhân viên nhiệm vụ JavaScript như dựa trên Grunt, Gulp, Brunch hoặc Broccoli.

Đây là số example được lấy thẳng từ trang Bắt đầu bông cải xanh.

1. Cài đặt nút npm install -g broccoli-cli
2. Bên trong thư mục gốc dự án của bạn, cài đặt Broccoli npm install --save-dev broccoli
3. Cài đặt Broccoli Sass và hợp nhất cây (bundling) plugins npm install --save-dev broccoli-sass broccoli-merge-trees
4. Tạo/Chỉnh sửa tập tin một Brocfile.js
5. Tạo nội dung của bạn broccoli build dist

Ví dụ Brocfile.js nộp

/* 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: Bạn có thể dễ dàng chuyển đổi Sass cho LESS

Answer 2

Bạn vẫn có thể sử dụng một đơn .css trong đó có tất cả các quy tắc phong cách cho tất cả các thành phần của bạn và nhập khẩu các tập tin cùng một .css trong mọi thành phần (bạn phải sử dụng tên bộ chọn/thẻ thay vì :host {). Tuy nhiên, trình duyệt lưu trữ tệp, do đó, trình duyệt sẽ chỉ tải xuống một lần.

Lợi thế của các tệp có kích thước nhỏ .css bị mất. Tôi không biết về Less nhưng đối với SASS Tôi hiện đang làm việc trên một nhà nhập khẩu tùy chỉnh nơi đường dẫn nhập có thể được đặt trước bằng id/name và trình nhập tùy chỉnh kiểm tra cục bộ nếu ghi đè cho id/tên đó được xác định và trả về thay vào đó, nếu không thì nhập sẽ rơi trở lại mặc định.
Bằng cách này, người tạo ra các thành phần có thể cung cấp các móc ghi đè nơi người dùng có thể chuyển các biến riêng, các kết hợp, ... thay vì mặc định vào thời gian xây dựng.

Answer 3

Nếu bạn đang tạo ứng dụng mới, ngay sau tên ứng dụng, hãy thêm --style để chọn bộ tiền xử lý của bạn.

ng new my-first-app --style less 

All options for angular cli 'new' command

Answer 4

dự án mới

Bạn có thể sử dụng --style cờ để thiết lập một CSS Preprocessor

ng new my-app --style less 

dự án hiện tại

1. Nếu bạn có dự án hiện tại, bạn có thể chỉnh sửa .angular-cli.json tệp và đặt defaults.styleExt giá trị thành less. Hoặc bạn có thể sử dụng chỉ cần sử dụng: ng set defaults.styleExt less
2. Đổi tên tập tin CSS của một thành phần từ mycomp/mycomp.component.css ->mycomp/mycomp.component.less
3. Cập nhật styleUrls trong mycomp/mycomp.component.ts, ví dụ styleUrls: ['./mycomp.component.css'] ->styleUrls: ['./mycomp.component.less']

Resource