Laden von CSS dynamisch nach Modul geladen mit Webpack - VueJS

Question

Ich habe eine VueJS-Anwendung, die Webpack 2 verwendet. Ich arbeite an VueJS und arbeite mit einem Webdesigner, der der App CSS-Klassen hinzufügt. Der Designer möchte 1 CSS-Datei für die Login-Seite (login.css), 1 CSS-Datei für nach dem Login (app.css) und so weiter haben. Also ist es nicht nötig, app.css beim Login zu laden Seite und umgekehrt. Außerdem können die CSS-Dateien die gleichen Klassen haben, werden aber für verschiedene Dinge verwendet. Beispiel: Für Body-Tags verwendet er in der Datei login.css die Schriftgröße 10px und in der Datei app.css das gleiche body-Tag, wobei er die Schriftgröße 12px verwendet. Jetzt importieren ich in meinem main.js die CSS-Dateien Datei:

import '../src/assets/css/login.css'; 
import '../src/assets/css/app.css'; 

Auf diese Weise, was auch immer ist auf app.css login.css außer Kraft setzt.

Also wie kann ich nur die CSS-Dateien laden (wenn ich sie brauche), damit sie sich gegenseitig ersetzen. Wie, für Login-Seite load login.css dann für nach dem Login laden app.css?

Derzeit bin ich in den webpack.config.js folgenden:

{ 
      test: /\.css$/, 
      loader: 'style-loader!css-loader' 
     }, 

Answer 1

Sie sind zur Zeit dieser beiden Arten in Ihrem Javascript sind inlining so überall importieren Sie main.js diese Stile werden ebenfalls enthalten sein.

Sie müssen entweder spezifisch mit Ihren Importen sein und Ihren Import auf der Seite verwenden, wo Sie sie benötigen (wenn Sie eine einzelne Seite haben).

Wenn Sie kein SPA haben, müssen Sie das CSS aus Ihren Importen extrahieren, um Dateien zu trennen, die Sie selbst mit einem <link>-Tag versehen können. Sie können dies tun, um dieses Webpack Plugin unter Verwendung:

https://github.com/webpack-contrib/extract-text-webpack-plugin