SASS URL beim Erstellen des Projekts umschreiben

Question

Ich benutze webpack-dev-server während der Entwicklung und habe einen öffentlichen Ordner als Inhaltsdatenbank mit: index.html, img /**.*. Jpg.

Während der Entwicklung in meiner sass Datei verweisen i Bilder als:

background-image: url('img/background.jpg'); 

Dies funktioniert während der Entwicklung in Ordnung, da webpack-dev-Server die Bilder in dem öffentlichen Ordner dient.

Aber wenn ich das Projekt erstelle und einen Dist-Ordner erzeuge, der später auf einem Testserver bereitgestellt wird, muss ich alle URLs in den Sass-Dateien neu schreiben, da sie nicht von der Wurzel aus bedient werden der Webserver. In meinem Fall möchte ich die vorherige CSS-Regel wie neu schreiben:

background-image: url('folder1/folder2/folder3/img/background.jpg'); 

Ist das möglich?

Answer 1

Ich löste dies mit Umgebungsvariablen mit Sass-Loader.

module.exports = { 
    ... 
    sassLoader: { 
    data: "$env: " + process.env.NODE_ENV + ";" 
    } 
}; 

Answer 2

Nicht genau. Ich würde Sie stattdessen halten Sie Ihre Pfade relativ zu dem Ordner, empfehlen Sie sind momentan in. Zum Beispiel haben einen assets Ordner, der beide img hat, sass usw. Dann deine Pfade in Bezug auf die assets Wurzel sein könnte, wie zu benötigen, um gegen Wechseln Sie in einen separaten Build-Ordner. Auf diese Weise ist es egal, ob Sie in build, dist oder anders sind.

Zum Beispiel:

|assets 
|-sass 
|--my_styles.scss 
|--SUBSTYLES 
|---my_substyles.scss 
|-img 
|--my_img.png 

und Ihre Wege wäre dann:

url(../img/my_img.png) //For my_styles.scss 

und

url(../../img/my_img.png) //For my_substyles.scss 

---

Andernfalls werden Sie eine separate Variable halten müssen Datei pro Server/Build-Typ, der eine 012 definiertVariable und hängt es in Ihrem SASS an. Etwas in Richtung

url($ROOT_PATH + 'img/my_img.png') 

, die immer in ein Mixin eingewickelt werden konnten, um einfacher verwendet zu werden.