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

Question

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

中关闭 mini-css-extract-plugin

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

Answer 1

当我查看 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 为真。

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

Answer 2

这是一个老问题，但对于像我一样遇到这个问题的其他人来说：

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

切换 css 提取的官方方法是使用 css.extract 属性，如 the docs 中所述，它在幕后配置 mini-css-extract-plugin。默认情况下，css 提取对于开发版本是关闭的（以启用热重新加载），对于生产版本是打开的。

要关闭 CSS 提取生产构建，请在包含

的项目根目录中添加 vue.config.js（或扩展现有构建）

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

Answer 3

这个问题我已经解决了

> 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()
    }
    ...
}

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

How to not extract CSS into separate files in vue-cli3?

webpack

vue-cli