angular-cli: CSS abhängig von der Umgebung

Question

Ich verwende Angular 2 mit angular-cli. Für Kunde A ist die CSS-Datei style.A.css relevant, für Kunde B ist es style.B.css. Ist es möglich, dass die indefinierten CSS-Dateien von der aktiven Umgebung abhängig sind? Wenn nicht, keine elegante Lösung dafür?

Der CSS-Bereich ist die ganze App, wie eine völlig andere Erscheinung. Der Komponentenumfang wird also nicht ausreichen.

Answer 1

Dies hängt davon ab, wie Ihr Projekt eingerichtet wird. Und ob Sie aus dem CLI ausgeworfen werden. Ich benutze einen eckigen eckigen cli mit eckigen 4 und webpack. Sie können Umgebungsdateien anpassen, wenn Sie ausgeworfen oder nicht ausgeworfen werden, aber der css-Buildprozess ist früher während des Builds als die Umgebungsdateien. Ich würde empfehlen, die Webpack-Konfiguration anzupassen, um eine Datei basierend auf Ihrem npm-Skript abhängig von Ihrem Build-Ziel zu kopieren. Sie können das GlobCopyWebpackPlugin verwenden, um Dateien in den Ausgabeordner zu kopieren. Dann würden Sie diese CSS-Datei statisch importieren.

Zum Beispiel in webpack.config.js Ich kopiere Dateien während des Builds in den Ausgabeordner, Sie könnten ein CSS auf die gleiche Weise kopieren, dann in Ihrem Hauptindex.html nur bringen, dass CSS, die von der geliefert wird Umgebung, für die Sie bauen.

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

Mein package.json bietet die Umwelt Flagge während der Skripterstellungsprozess

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

Sie die Umwelt Flagge verwenden könnte die entsprechende CSS-Datei für die 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" 
      } 
     })` 

zu wählen