根据使用 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

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

Load CSS Dynamically according to module loaded with Webpack - VueJS

css

webpack

vue.js

webpack-style-loader

webpack-2