Question

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

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

Answer 1

您很有可能必须为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注入文件的顶部，以实现自动重新渲染的目的。

Answer 2

您可以通过在vue.config.js

中添加以下代码来实现这一点

//vue.config.js

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

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

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

2 个答案: