运行“vue-cli-service build --watch”时没有 CSS 文件

Question

我有一个用 vue-cli 生成的简单项目。当我运行该vue-cli-service build命令时，它会正确生成 CSS 文件。当我运行该vue-cli-service build --watch命令时，它只会构建 JavaScript 文件。没有 CSS 文件。

如何在监视模式下生成 CSS 文件？

Answer 1

您可以通过在您的 vue.config.js

//vue.config.js

module.exports = {
//adding extract css true solves this issue
 css: {
    extract: true
  }
}

https://cli.vuejs.org/config/#css-extract

Answer 2

您很有可能必须使用 webpack 的提取插件。

我知道在我的vue.config.js文件中我正在使用：

  chainWebpack: config => {
    if (config.plugins.has('extract-css')) {
      const extractCSSPlugin = config.plugin('extract-css');
      extractCSSPlugin &&
        extractCSSPlugin.tap(() => [
          {
            filename: 'build.css',
            chunkFilename: 'build.css'
          }
        ]);
    }
  }

希望这对您有帮助。然而，我认为，vue 在文件顶部以监视模式注入 css，以实现自动重新渲染的目的。