SCSS styles in single-file component .vue files not working

[jstaro]

I installed

    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",

Then, a .vue file containing the following:

<style lang="scss" scoped>
    footer {
        display: flex;
        justify-content: flex-end;
    }
</style>

results in

      ERROR in ./src/renderer/app-footer.vue?vue&type=style&index=0&id=62966a6a&scoped=true&lang=scss (./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/app-footer.vue?vue&type=style&index=0&id=62966a6a&scoped=true&lang=scss)
      Module parse failed: Unexpected token (1:7)
      You may need an appropriate loader to handle this file type.
      | footer {
      |   display: flex;
      |   justify-content: flex-end; }

Looking at electron-webpack/out/configurators/vue.js, I'm not sure that's correct. Is this Vue v1.4 syntax perhaps?

    test: /\.vue$/,
    use: {
      loader: "vue-loader",
      options: {
        loaders: {
          sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax=1",
          scss: "vue-style-loader!css-loader!sass-loader"
        }
      }
    }

Normally, adding a rule for .scss should be enough: https://vue-loader.vuejs.org/guide/pre-processors.html

[jstaro]

It appears loaders has been deprecated with Vue v2.x: https://vue-loader.vuejs.org/migrating.html#options-deprecation (it says loader, but reading the rest of the doc + the new Options Reference makes it clear that it should no longer be used).

[suforozinho]

Installing vue-loader@13.0.5 and downgrading electron-webpack to electron-webpack@1.13.0 worked for me, but i had to use an old webpack version like webpack@3.11.0.

[downace]

I got similar error. Reproduction steps:

1. Install electron-webpack using instructions:

$ mkdir project && cd project
$ curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

2. Install dependencies:

$ yarn

3. Add Vue.js add-on using instructions:

$ yarn add vue electron-webpack-vue --dev

4. Import vue component in renderer:

src/renderer/index.js:

require('./App.vue');

src/renderer/App.vue:

<template>
    <div>Hello world!</div>
</template>
<script>
    export default {};
</script>

5. Run yarn dev and get an error:

ERROR in ./src/renderer/App.vue?vue&type=template&id=2fa9d48e
  Module parse failed: Unexpected token (2:0)
  You may need an appropriate loader to handle this file type.
  | 
  | <div>Hello world!</div>
  | 
   @ ./src/renderer/App.vue 1:0-81 10:2-8 11:2-17 30:4-35:6 30:65-35:5 32:16-22 33:25-40
   @ ./src/renderer/index.js
   @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/renderer/index.js

  ERROR in ./src/renderer/App.vue
  vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
   @ ./src/renderer/index.js 1:0-20
   @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/renderer/index.js

Looks like VueLoaderPlugin is required: https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required

[downace]

Looks like this issue is for electron-userland/electron-webpack-quick-start repo, because updating electron-webpack manually to 2.1.* fixes it (2.1.0, to be precise)