angular-cli：CSS取決於環境

Question

我正在使用Angular 2和angular-cli。對於客戶A，CSS文件style.A.css是相關的，對於客戶B而言，它是style.B.css。是否有可能使apps[0].styles中定義的css文件依賴於活動環境？如果沒有，任何優雅的解決方案呢？

CSS的範圍是整個應用程序，就像一個完全不同的外觀。所以組件範圍是不夠的。

Answer 1

這取決於您的項目設置方式。並且你是否被從CLI中彈出。我使用角4和webpack的彈出角度cli。如果彈出或不彈出，您可以自定義環境文件，但css構建過程在構建期間早於環境文件。我建議根據您的構建目標，根據您的npm腳本，自定義webpack配置來複制文件。您可以使用GlobCopyWebpackPlugin將文件複製到輸出文件夾。然後你會靜態導入該css文件。

例如在webpack.config.js中，我在構建過程中將文件複製到輸出文件夾，您可以以同樣的方式複製CSS，然後在您的主index.html中只需引入由該提供的css你正在建造的環境。

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

我的package.json在腳本編譯過程

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

您可以使用環境標誌來選擇合適的CSS文件的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" 
      } 
     })` 

提供了環境標誌