I would like to have styles.css control all the project styles and perhaps also override Quasar basic colors in quasar-variables.sass.

I'm primarily a .NET and MSSQL developer, but I'm expanding my horizons by exploring Vue and Quasar. However, I'm having trouble customizing my color scheme.

I'm following the instructions from the Quasar CSS Preprocessors guide (/quasar-cli-vite/css-preprocessors), but I'm encountering issues when attempting to import custom CSS color variables.

Any suggestions would be greatly appreciated!

GitHub Repository:

File to import: Frontend\src\quasar-variables.sass

Proposed code change in App.vue that generated error: [sass] Error: Expected newline.

<style lang="sass">
// $

I would like to have styles.css control all the project styles and perhaps also override Quasar basic colors in quasar-variables.sass.

I'm primarily a .NET and MSSQL developer, but I'm expanding my horizons by exploring Vue and Quasar. However, I'm having trouble customizing my color scheme.

I'm following the instructions from the Quasar CSS Preprocessors guide (https://quasar.dev/quasar-cli-vite/css-preprocessors), but I'm encountering issues when attempting to import custom CSS color variables.

Any suggestions would be greatly appreciated!

GitHub Repository: https://github/billjenner/vue-quasar-app

File to import: Frontend\src\quasar-variables.sass

Proposed code change in App.vue that generated error: [sass] Error: Expected newline.

<style lang="sass">
// $

• css
• sass
• vuejs3
• quasar-framework
• quasar

1 Answer 1

The answer is to use SCSS. I didn't realize the difference in synctax.

<style lang="scss">