Electron-vue: not support stylus

[wuchuguang]

want i use stylus in App.vue

report error
./src/renderer/App.vue?vue&type=style&index=0&lang=stylus& (./node_modules/vue-loader/lib??vue-loader-options!./src/rende
rer/App.vue?vue&type=style&index=0&lang=stylus&) 30:3

[wuchuguang]

i installed stylus and stylus-loader

[gabrielstuff]

Hello,
Did you made any change to your webpack config?

[wuchuguang]

not change webpack config.

[qiwang97]

i meet the same problems although i install the stylus and stylus-loader . i try hard to change my webpack config,but it doesn't work.

[phoenixwong]

I came across this issue and got it resolved by modifying my Webpack configs.

1. Get the loaders

Firstly, get both stylus-loader and stylus module installed.

2. Modify Webpack configs

Then, add the following rules in both webpack.web.config.js and webpack.renderer.config.js.

module: {
  rules: [
    {
      test: /\.styl(us)?$/,
      use: ['vue-style-loader', 'css-loader', 'stylus-loader']
    },
    ...
    {
      test: /\.vue$/,
      use: {
        loader: 'vue-loader',
        options: {
          loaders: {
            stylus: 'vue-style-loader!css-loader!stylus-loader',
            styl: 'vue-style-loader!css-loader!stylus-loader'
          }
        }
      }
    },
    ...
  ]
}

Hope it helps.