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

【问题标题】：Load CSS Dynamically according to module loaded with Webpack - VueJS根据使用 Webpack 加载的模块动态加载 CSS - VueJS
【发布时间】：2018-02-11 22:09:16
【问题描述】：

我有一个使用 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'
        },

【问题讨论】：

标签： css webpack vue.js webpack-2 webpack-style-loader

【解决方案1】：

您目前在 javascript 中内联这两种样式，因此无论您在哪里导入 main.js，这些样式也将被包含在内。

您需要明确导入并在需要的页面上使用导入（如果您有单页应用程序）。

如果您没有 SPA，则需要从导入中提取 CSS 到单独的文件中，您可以使用 <link> 标签包含自己。你可以使用这个 Webpack 插件来做到这一点：

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

【讨论】：

我的是一个 SPA，我想在 main.js 上内联 CSS 可以解决它。因为 CSS 文件很小。谢谢！