Question

在vue-cli3项目中，当我们构建项目时，似乎它将由js自动将项目分为css文件和mini-css-extract-plugin文件。但是现在我只想要js文件。所以我认为我需要关闭mini-css-extract-plugin中的vue.config.js。

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

Answer 1

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

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

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

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

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

Answer 2

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

因此，在process.env.VUE_CLI_CSS_SHADOW_MODE = true;中添加vue.config.js即可！

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中的单独文件中？

3 个答案: