angle-cli: CSS zależny od środowiska

Question

Używam Angular 2 z angular-cli. Dla klienta A plik CSS style.A.css jest istotny, dla klienta B jest to style.B.css. Czy jest możliwe, aby pliki css zdefiniowane w apps[0].styles były zależne od aktywnego środowiska? Jeśli nie, jakieś eleganckie rozwiązanie tego?

Zakres CSS to cała aplikacja, podobnie jak zupełnie inny wygląd. Tak więc zakres komponentu nie będzie wystarczający.

Answer 1

Jest to zależne od konfiguracji projektu. I czy jesteś wyrzucony z CLI. Używam wyrzuconego kątowego-cli z kątowym 4 i plecakiem. Możesz dostosować pliki środowiska, jeśli zostaniesz wyrzucony lub nie wysunięty, ale proces budowania css jest wcześniejszy podczas kompilacji niż pliki środowiska. Polecam dostosowanie konfiguracji webpacka do kopiowania pliku na podstawie twojego skryptu npm w zależności od twojego celu kompilacji. Możesz użyć GlobCopyWebpackPlugin do skopiowania plików do folderu wyjściowego. Następnie statyczny import tego pliku css.

Na przykład w webpack.config.js Kopiuję pliki podczas kompilacji do folderu wyjściowego, można kopiować css w ten sam sposób, a następnie w głównym pliku index.html po prostu wprowadzić te css, które są dostarczane przez środowisko, dla którego budujesz.

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

Moja package.json zapewnia flagę środowiska podczas procesu kompilacji skryptu

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

można użyć flagi środowiskową, aby wybrać odpowiedni plik css dla 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" 
      } 
     })`