SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
https://simulatedgreg.gitbooks.io/electron-vue/content/
MIT License
15.47k stars 1.54k forks source link

not support stylus #792

Open wuchuguang opened 5 years ago

wuchuguang commented 5 years ago

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 commented 5 years ago

i installed stylus and stylus-loader

gabrielstuff commented 5 years ago

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

wuchuguang commented 5 years ago

not change webpack config.

millievn commented 5 years ago

info

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 commented 5 years ago

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.