angular-cli: CSS phụ thuộc vào môi trường

Question

Tôi đang sử dụng Angular 2 với angular-cli. Đối với khách hàng Một tệp CSS style.A.css có liên quan, với khách hàng B là style.B.css. Có thể làm cho các tệp css được xác định trong apps[0].styles phụ thuộc vào môi trường hoạt động không? Nếu không, bất kỳ giải pháp thanh lịch cho điều này?

Phạm vi của CSS là toàn bộ ứng dụng, giống như giao diện hoàn toàn khác. Vì vậy, phạm vi thành phần sẽ không đủ.

Answer 1

Điều này phụ thuộc vào cách dự án của bạn được thiết lập. Và liệu bạn có bị đẩy ra khỏi CLI hay không. Tôi sử dụng một cli góc-đẩy với góc 4 và webpack. Bạn có thể tùy chỉnh các tệp môi trường nếu bạn bị đẩy ra hoặc không bị đẩy ra, nhưng quá trình xây dựng css sớm hơn trong quá trình xây dựng hơn các tệp môi trường. Tôi khuyên bạn nên tùy chỉnh cấu hình webpack để sao chép tệp dựa trên tập lệnh npm của bạn tùy thuộc vào mục tiêu xây dựng của bạn. Bạn có thể sử dụng GlobCopyWebpackPlugin để sao chép tệp vào thư mục đầu ra. Sau đó, bạn sẽ nhập tĩnh tệp css đó.

Ví dụ: trong webpack.config.js Tôi đang sao chép tệp trong khi tạo thư mục đầu ra, bạn có thể sao chép một css theo cùng một cách, sau đó trong index.html chính của bạn, chỉ cần cung cấp css được cung cấp bởi môi trường bạn đang xây dựng.

new GlobCopyWebpackPlugin({ 
    "patterns": [ 
    "assets", 
    "favicon.ico", 
    "manifest.json", 
    "sw.js" 
    ], 
    "globOptions": { 
    "cwd": process.cwd() + "/src", 
    "dot": true, 
    "ignore": "**/.gitkeep" 
    } 
}) 

package.json tôi cung cấp cờ môi trường trong kịch bản xây dựng quy trình

"scripts": { 
    "ng": "ng", 
    "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback", 

Bạn có thể sử dụng cờ môi trường để chọn tập tin css phù hợp cho GlobCopyWebpackPlugin

// export a function that returns a promise that returns the config object 
module.exports = function(env) { 

const isLocal = env.target === 'local'; 
if(isLocal) { /* set the css file to a variable mycssfile*/ } 

/* code removed for brevity */ 
    "plugins": [ 

    new NoEmitOnErrorsPlugin(), 

    new GlobCopyWebpackPlugin({ 
      "patterns": [ 
      `${mycssfile}`, 
      "assets", 
      "favicon.ico", 
      "manifest.json", 
      "sw.js" 
      ], 
      "globOptions": { 
      "cwd": process.cwd() + "/src", 
      "dot": true, 
      "ignore": "**/.gitkeep" 
      } 
     })`