Autoformat breaks SASS in Vue templates

I'm using Vue single file components, and I've got a <style> tag in it as follows:

<style scoped lang="sass">
#container
height: 100%
background-color: #FF3800
text-align: center

#logo
width: 50%
margin-top: 20%
</style>

Now I do get correct syntax highlighting and also errors in syntax (semicolons, curly braces get underlined in red), so I'd expect that IntelliJ does understand I'm using SASS in this tag; however, when I press `Ctrl+Alt+L` to autoformat, all blocks starting from the second on get indented as to be one level below the first one:

<style scoped lang="sass">
#container
height: 100%
background-color: #FF3800
text-align: center

#logo
width: 50%
margin-top: 20%
</style>

Since indentation is syntactically meaningful in SASS, this breaks the stylesheet.

I wasn't able to find a setting to disable indentation for SASS (as I'd still like to use autoformat for the HTML and JS parts of the Vue component), is there another way around this?

Thank you!

0
2 comments

Logged as https://youtrack.jetbrains.com/issue/WEB-30990, please follow it for updates.

You can try adding "style" to settings "Settings > Editor > Code Style > HTML | Other | Do not indent children of" and move all your blocks to the left to get them aligned with <style> - formatter won't move the blocks then... But you will face issues with smart Enter - properties will be aligned in a wrong way on hitting Enter (related to https://youtrack.jetbrains.com/issue/WEB-29446)

2
Avatar
Permanently deleted user

Thank you for such a prompt response!

Yes, this workaround suffices, thanks.

0

Please sign in to leave a comment.