如何不将 CSS 提取到 vue-cli3 中的单独文件中？答案

【问题标题】：How to not extract CSS into separate files in vue-cli3?如何不将 CSS 提取到 vue-cli3 中的单独文件中？
【发布时间】：2020-09-04 04:45:37
【问题描述】：

在 vue-cli3 项目中，我们在构建项目时，似乎会通过mini-css-extract-plugin 自动将项目分成js 文件和css 文件。但现在我只想要js 文件。所以我想我需要在vue.config.js 中关闭mini-css-extract-plugin。

我想知道怎么做，谢谢你的帮助。

【问题讨论】：

标签： webpack vue-cli

【解决方案1】：

我已经通过这个解决了这个问题。

> vue.config.js

process.env.VUE_CLI_CSS_SHADOW_MODE = true; // close the config about sperating css from js

module.exports = {
    chainWebpack: config => {
        config.optimization.delete('splitChunks') // close splitChunks
        config.output
            .filename('app.js')
            .library('@[library]/[sub-project]')
            .libraryTarget('amd') 
            .end()
    }
    ...
}

【讨论】：

【解决方案2】：

这是一个老问题，但对于像我一样绊倒这个问题的其他人：

现有的答案有点作用，但具有误导性。 VUE_CLI_CSS_SHADOW_MODE 在构建 Web 组件时使用，并且在现在和将来的版本中可能会产生其他副作用。

切换css提取的官方方法是使用the docs中描述的css.extract属性，它在后台配置mini-css-extract-plugin。默认情况下，css 提取对于开发构建（以启用热重载）和生产构建是关闭的。

要关闭 CSS 提取生产构建，请在包含的项目根目录中添加 vue.config.js（或扩展现有的）

module.exports = {
  css: {
    extract: true
  }
};

【讨论】：

【解决方案3】：

当我查看vue-cli-service 代码时，我发现了如何去做。有这样的代码。

const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
...
const shouldExtract = extract !== false && !shadowMode
...
if (shouldExtract) {
  rule
    .use('extract-css-loader')
    .loader(require('mini-css-extract-plugin').loader)
    .options({
      hmr: !isProd,
      publicPath: cssPublicPath
    })

所以我只需要设置VUE_CLI_CSS_SHADOW_MODE true。

所以在vue.config.js 中添加process.env.VUE_CLI_CSS_SHADOW_MODE = true; 就可以了！

【讨论】：