electron-userland / electron-userland/electron-webpack

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

Open
#148 4 comments 4 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
902
Forks
168
PR merge metrics
No merged PRs in 30d

Description

I installed
```
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
```

Then, a .vue file containing the following:
```

footer {
display: flex;
justify-content: flex-end;
}

```
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?
```js
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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.