Sublime Forum

When installed VueComponent into Sublime Text 4 the inner CSS which is specified for child elements inside parent element's css code is not showing with proper Syntax Highlighting and Intellisense

#1

I have recently installed Sublime Text 4 and then the Vue Syntax Highlight plugin into it.

Now when I have to write CSS for inner elements like the one showed in attached screenshot here, as you can see there’s no Syntax Highlight and also the Intellisense is not working for the inner CSS code.

How do I fix this issue, do I need to set anything in Sublime or that plugin’s settings, or is this a temporary on-going bug in the Sublime / plugin itself ?

image

0 Likes
#2

What you’re writing is SCSS (or LESS), not CSS, which Sublime Text doesn’t have bundled syntax for. You need to install a package for the appropriate language first.

See also this issue: https://github.com/vuejs/vue-syntax-highlight/issues/204#issuecomment-740767553.

0 Likes
#4

Ohk, thanks for reply

0 Likes
#5

If you want to use sass/scss/less you’d need to explicitly specify the language to use.


<!DOCTYPE html>
<html>
<head>
	<style lang="scss">
		.pointer-events {
			.md-ripple {
				opacity: none;
			}
		}
	</style>
</head>
<body>
</body>
</html>

With Vue Syntax Highlight and SASS or LESS packages installed you get correct highlighting.

grafik

1 Like