It can't work with vue-cli/webpack-template

[phcoliveira]

Hello there, I was really needing something this.

Using vue inspect, I can be fairly certain that the first rule is the vue-loader. So I have tried this:

  configureWebpack: config => {
    config.module.rules.splice(1, 0, {
      test: /\.vue$/,
      loader: "vue-themed-style-loader",
      options: {
        theme: "zendesk",
      }
    });
  }

I also did other attempts, like using module.rules.push, but neither worked.
What am I missing?

[marvin-bitterlich]

@phcoliveira try this:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        return options
      });
    config.module
      .rule('vue')
      .use('vue-themed-style-loader')
      .loader('vue-themed-style-loader')
      .tap(options => {
        return { ...options, theme: 'zendesk' }
      });
  }
}

[brophdawg11]

Thanks for the suggestion @reggaemuffin. Did that work for you @phcoliveira?

I haven't used this through vue-cli, only in custom webpack builds, so I'm not super familiar with the chainWebpack configuration approach. If you are still having issues - could you provide a CodeSandbox link demonstrating the issue?