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

Question

我有一个使用 Webpack 2 的 VueJS 应用程序。 我正在研究 VueJS，我将与一名网页设计师合作，为应用程序添加 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