electron-userland / electron-userland/electron-webpack
SCSS styles in single-file component .vue files not working
- 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.