Question

我有一个使用Webpack 2的VueJS应用程序。我正在研究VueJS，我将与一个将为应用程序添加CSS类的webdesigner合作。设计者希望登录页面（login.css）有1个CSS文件，登录后有1个CSS文件（app.css），等等。所以事情是没有必要在登录时加载app.css页面，反之亦然。除此之外，CSS文件可能具有相同的类，但将用于不同的事情。示例：对于body标签，他将在login.css中使用font-size 10px，而在app.css上使用相同的body标签，他将使用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

根据加载Webpack - VueJS的模块动态加载CSS

1 个答案: