Vue-loader: Style building fails with vue-loader 15

[amorphine]

Version

15.2.1

Reproduction link

https://github.com/amorphine/vue-loader-fails

Steps to reproduce

npm install
npm run dev

What is expected?

No errors while bundling

What is actually happening?

ERROR in ./assets/app/components/vue-component/v.css?vue&type=style&index=0&id=6ba94e40&lang=css&scoped=true (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./assets/app/components/vue-component/v.css?vue&type=style&index=0&id=6ba94e40&lang=css&scoped=true)
Module build failed: ReferenceError: document is not defined
    at addStyle (webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js?:123:22)
    at addStylesToDom (webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js?:107:20)
   ***********************
 @ ./assets/app/components/vue-component/v.css?vue&type=style&index=0&id=6ba94e40&lang=css&scoped=true 1:0-321 1:337-340 1:342-660 1:342-660
 @ ./assets/app/components/vue-component/v.vue
 @ ./assets/app/app.js

[yyx990803]

vue-style-loader should be replaced by the extract loader, not used together.

[JimmyLv]

Thanks, but how can I replace vue-style-loader with extract loader when using vue-cli?

[camslice]

Instructions here should work @JimmyLv https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule

You can use vue inspect --rule css > output.js to preview the resulting webpack config for css rules. (inspect docs here https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config)

I was able to get it working like this (using the singletonStyleTag option because it has been removed from vue-style-loader: https://github.com/vuejs/vue-style-loader#misc):

  chainWebpack: config => {
    const cssVueRule = config.module.rule('css').oneOf('vue')
    cssVueRule.uses.clear()
    cssVueRule
      .use('style-loader')
      .loader('style-loader')
      .options({
        injectType: 'singletonStyleTag'
      })
    cssVueRule
      .use('css-loader')
      .loader('css-loader')
      .options({
        sourceMap: false,
        importLoaders: 2
      })
    cssVueRule
      .use('postcss-loader')
      .loader('postcss-loader')
      .options({
        sourceMap: false,
        plugins: [
          require('postcss-import')
        ]
      })
  }

As you can see, you have to redefine the config for other loaders like css-loader and postcss-loader. This is not the recommended way to modify CSS loader configs according to the docs (https://cli.vuejs.org/config/#css-loaderoptions), however I don't see any other way if we're clearing all the existing rules. I had to manually specify postcss plugins, which required them to be added to the project's dev dependencies. I wasn't sure how to use the plugins already defined in the postcss loader config.

Is there a better way to achieve what I've done here but using existing configs for other CSS loaders @yyx990803 ?