angular-cli：環境に依存するCSS

Question

角2をangular-cliで使用しています。顧客AのCSSファイルstyle.A.cssが適切です。顧客Bの場合はstyle.B.cssです。 apps[0].stylesで定義されたCSSファイルをアクティブな環境に依存させることは可能ですか？そうでない場合は、このための優雅なソリューションですか？

CSSのスコープは全く違った外観のようなアプリ全体です。したがって、コンポーネントのスコープは十分ではありません。

Answer 1

これは、プロジェクトの設定方法によって異なります。 CLIから取り出されたかどうか。私はアンギュラ4とウェブパック付きの排出された角張ったcliを使用します。排出されたか排出されなかった場合でも環境ファイルをカスタマイズすることができますが、ビルド中は環境ファイルよりもcssビルドプロセスの方が早いです。ビルドターゲットに応じてnpmスクリプトに基づいてファイルをコピーするようにwebpack configをカスタマイズすることをお勧めします。 GlobCopyWebpackPluginを使用すると、ファイルを出力フォルダにコピーできます。次に、そのcssファイルを静的にインポートします。

たとえば、webpack.config.jsでは、ビルド中に出力フォルダにファイルをコピーしていますが、同じ方法でCSSをコピーしてから、メインのindex.htmlにコピーしてください。あなたが構築している環境。

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

マイpackage.jsonあなたは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" 
      } 
     })` 

のための適切なCSSファイルを選択するために、環境フラグを使用することができ

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

スクリプトビルドプロセス中に環境フラグを提供します