Wie kann ich eine statische Hilfsfunktion (JavaScript) in SCSS verwenden, um die Basis-URL für Bilder für verschiedene Umgebungen festzulegen?

Question

In meiner SCSS-Datei muss ich verschiedene Basis-URLs für verschiedene App-Umgebungen verwenden, die dem Bildnamen vorangestellt werden.

Beispiel:

• Für Produktionsumgebung

background: url(/prod/image.png);

• Für Entwicklungsumgebung

background: url(/dev/image.png);

Die Hilfsfunktion, die ich in den Rest meiner App gibt den Basispfad der statischen Vermögenswerte und es sieht wie folgt aus:

static imagePath() { 
    let imagesPath; 

    if (this.isProduction()) { 
    basePath = '/prod'; 
    } else { 
    basePath = '/dev'; 
    } 
    return basePath 
    } 

Wie dies zu erreichen?

Edit: *

ich extract-text-webpack-plugin bin mit der mich nicht ausgegeben mehrere css Dateien lassen.

Answer 1

Zum Beispiel können Sie zwei Haupt Dateien (dev.scss und prod.scss), die aussehen wird:

// prod.scss 

$basePath: '/prod'; 
@import "style.scss"; 

und gleich für dev.scss.

Andernfalls können Sie einen Platzhalter für das Pfadpräfix verwenden und im Post-Processing-Schritt durch das tatsächliche Präfix ersetzen. Zum Beispiel können Sie this Plugin für PostCSS verwenden.

UPDATE: Nach der Diskussion in den Kommentaren hier (nicht getestet) Beispiel dafür, wie webpack Konfiguration kann wie folgt aussehen:

module.exports = { 
    // .... 
    module: { 
     rules: [ 
      // .... 
      { 
       test: /\.scss$/, 
       use: { 
        loader: StringReplacePlugin.replace({ 
         replacements: [ 
          { 
           pattern: /{urlPrefix}/ig, 
           replacement:() => process.env.NODE_ENV !== 'production' ? '/dev' : '/prod', 
          } 
         ] 
        }, 'sass-loader'), 
       } 
      }, 
      // .... 
     ], 
    }, 
    plugins: [ 
     new StringReplacePlugin(), 
     // .... 
    ], 
    // .... 
};