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

【问题标题】：No CSS files when running 'vue-cli-service build --watch'运行“vue-cli-service build --watch”时没有 CSS 文件
【发布时间】：2020-01-25 01:51:14
【问题描述】：

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

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

【问题讨论】：

标签： vue.js vue-cli vue-cli-3

【解决方案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

【讨论】：

就是这样。如此简单的解决方法！

【解决方案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 以实现自动重新渲染的目的。

【讨论】：

你是对的。 CSS 被添加到 JavaScript 文件中。它需要将Content-Security-Policy HTTP 标头设置为default-src 'self' 'unsafe-eval' 'unsafe-inline'。
@Baldrani 这在运行开发命令时似乎不起作用