根據加載Webpack的模塊動態加載CSS -VueJS

Question

我有一個使用Webpack 2的VueJS應用程序。 我正在使用VueJS，我將與一個webdesigner一起工作，它將嚮應用程序添加CSS類。設計人員希望有1個CSS文件用於登錄頁面（login.css），1個用於登錄後的CSS文件（app.css）等等。所以事情是，在登錄時不需要加載app.css頁面，反之亦然。除此之外，CSS文件可能具有相同的類，但將用於不同的事情。例如：對於body標籤，他將在login.css中使用font-size 10px，並在app.css中使用相同的身體標籤，他將使用font-size 12px。 現在我導入我main.js文件的CSS文件：

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

這樣無論是app.css覆蓋login.css。

那麼我怎樣才能加載所需的CSS文件（當我需要它們時），以便它們將互相替換。就像，登錄頁面加載login.css然後登錄後加載app.css？

目前我使用的webpack.config.js如下：

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

Answer 1

您目前在JavaScript內聯這兩種樣式，以便你到處導入main.js這些風格也將被包括在內。

您需要特定於導入，並在需要它的頁面上使用導入（如果您有單個頁面應用程序）。

如果您沒有SPA，則需要從導入中提取CSS以分隔文件，您可以使用<link>標籤自行包含這些文件。您可以使用此插件的WebPack做到這一點：

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