search

arielsalminen / vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://vueds.com
MIT License
2.17k stars 224 forks source link

[Bug] I can't add sass with indented syntax in style .vue file #107

Closed renanbronchart closed 5 years ago

renanbronchart commented 5 years ago

I want to add style in .vue files with sass indented syntax but it isn't possible.

capture d ecran 2018-08-29 a 17 06 09

I have this error after the command npm start

capture d ecran 2018-08-29 a 17 13 53

Thanks a lot for your help !

michaelpumo commented 5 years ago

You tried:

npm install sass-loader node-sass style-loader --save-dev

renanbronchart commented 5 years ago

Yes, thanks for your help, but I tried this and it doesn't work. Packages are here, scss work but not sass indented syntax. Someone else ?

arielsalminen commented 5 years ago

@renanbronchart I know it’s been a while, but this will be fixed in 3.5.0 release later today or tomorrow!

arielsalminen commented 5 years ago

This is now fixed.

struers-mfr commented 5 years ago

I have version 3.5.6 and I am still not able to use indented syntax sass styles. I add TestElement.vue into elements folder and I'm using variables from default tokens and reset mixin from styles/_mixins.scss This is error I getting in console:

ERROR Failed to compile with 1 errors

error in ./src/elements/TestElement.vue?vue&type=style&index=0&id=d91b89aa&lang=sass&scoped=true&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined ^ Unclosed parenthesis in vue-design-system/src/elements/TestElement.vue (line 64, column 14)

@ ./node_modules/vue-style-loader!./node_modules/css-loader??ref--8-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./n ode_modules/sass-loader/lib/loader.js??ref--8-3!./node_modules/sass-resources-loader/lib/loader.js??ref--8-4!./node_modules/vue-loader/lib??vue-loader-options!./src/elements/T estElement.vue?vue&type=style&index=0&id=d91b89aa&lang=sass&scoped=true& 4:14-452 14:3-18:5 15:22-460 @ ./src/elements/TestElement.vue?vue&type=style&index=0&id=d91b89aa&lang=sass&scoped=true& @ ./src/elements/TestElement.vue @ ./src/elements sync .vue$ @ ./src/system.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js

Do you have any suggestion how should I change some settings or webpack setup to use indented syntax components? Or some example in documentation will be good.