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?

Heriot

Answer 1

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.

Amphigory

You are right. The CSS is added to JavaScript file. It required Content-Security-Policy HTTP header set to default-src 'self' 'unsafe-eval' 'unsafe-inline'. – Arrowood

@Baldrani this does not seem to work when running development command – Konstantine

Answer 2

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

Konstantine

This is the way. Such an easy fix! – Hemorrhoid