No CSS files when running 'vue-cli-service build --watch'

Question

I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.

How can I generate CSS files in watch mode?

Answer 1

You can achieve this by adding this line of code in your 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

There is a good chance that you have to use an extract plugin for webpack.

I know that in my vue.config.js file I'm using :

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

Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.