Skip to content
Advertisement

Vue3 app on vite can’t compile scss syntax

I can’t use scss nesting syntax.

_table.scss

table { &.table { width: 100%; } } results in dev tools

I imported my _table.scss file into main.scss and main.scss into main.js main.scss main.js

Here is my package.json dependencies

JavaScript

And my vite.config.js

JavaScript

I followed the vite API

If I use simple syntax .block .block__item or use scss syntax in vue components – it works fine:

Simple syntax in my _table.scss file

JavaScript

results in dev tools

vue components

JavaScript

results in dev tools

Also I tried use sass-loader, It’s not working in my case(

Advertisement

Answer

My colleagues found a solution. We had to remove import through url in main.scss

Now my code in main.scss looks like this

JavaScript

And nesting syntax from scss is working

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement