style lang="scss" incorrectly reporting errors

[endoplasmic]

You can see that curly braces and semi colons are showing as errors when they are actually valid.

[galenyuan]

same to me, any solution?

[galenyuan]

@endoplasmic after installed sass in package control, it will be solved.

[mrliptontea]

@endoplasmic it depends on which package you use for Sass/SCSS in Sublime.
There are three:

1. Sass - most popular one but syntax definitions are very simple,
2. SCSS - doesn't support many features from Sass 3.3 and higher,
3. Syntax Highlighting for Sass - least popular and hardest to find but has the best syntax definitions.

Personally, I recommend to uninstall whatever syntax definitions you use for Sass and manually download Syntaxes and Preferences folders from last package's GitHub repo, and put them into Sublime Text 3/Data/Packages/Syntax Highlighting for Sass folder.

Now if you look into vue.tmLanguage you'll see that for lang="scss" both source.sass and source.scss will be included, which will cause issues with this syntax definition.

The solution: there is no way to keep everyone happy on this, at least not until Sublime will get the official package for Sass/SCSS, which would sort out which way this should be. So temporarily do this:

1. In Packages/User create Vue Syntax Highlight folder.
2. Copy vue.tmLanguage into that folder from either GitHub repo
   or unzip it from Sublime Text 3/Data/Installed Packages/Vue Syntax Highlight.sublime-package.
3. Remove the <dict> tag that includes source.sass under <string>source.scss.embedded.html</string>.

Note that if Vue Syntax Highlight package got an update, you would have to repeat this. Otherwise, you will still be using your old override file.

[endoplasmic]

@mrliptontea MAAAAAN that was tricky.

1. I had to install the plugin for Sublime 2 (I use Sublime 3) so that I could get the tmLanguage file
2. Now I have 2 listings for "Vue Component" under Syntax, so I just need to remember to pick the first one in the list.

Kind of a ghetto fix, but a fix none the less and I appreciate you taking the time to sort me out :)

[mrliptontea]

I just ran into the same issue recently. And yes, it is kind of a ghetto fix 😉

Ah, you didn't have to install ST2: .sublime-package files in Data/Installed Packages are basically .zip files - you can unpack them easily. Or just download package source from GitHub.

[endoplasmic]

Ahh, nice.

Yah what I ended up doing is removing the Vue Syntax Highlight package, creating the directories that you mentioned above, and changed the line of code you also mentioned above.

Now I've got it all working nicely 👯

[tandavas]

@mrliptontea wow! Thank you so much! This method works really well 🎉

[mismith]

Another thanks for @mrliptontea!

Related: I wish there were some instructions for how exactly to get SASS working in .vue files (including Sublime package installs, webpack config, etc). Not necessarily specifics, since those would be tough to maintain, but a general overview like:

1. Install Syntax Highlighting package in your editor
2. yarn add node-sass sass-loader
3. etc.

[mrliptontea]

Not a problem.

To get started with SCSS and .vue files in Sublime Text, well, install Vue Syntax Highlight package.
Apply the modification I explained above, if you use Syntax Highlighting for Sass.

To use Webpack and compile Sass/SCSS in .vue files use vue-cli tools with webpack or webpack-simple template:

$ vue init webpack-simple my-project

It'll create package.json and webpack config files for you. You might need to modify these config files depending on your project setup.

As of now, only webpack-simple comes with Webpack 2 support. But if you want to extract all CSS (from .vue and .scss/.sass files) and bundle them into one .css file, then check out the webpack template, namely build/utils.js.

[Doeke]

Simpler version of @mrliptontea's idea that worked for me (I only ever use scss for my vue files):

1. open AppData\Roaming\Sublime Text 3\Installed Packages\Vuejs Complete Package.sublime-package with a zip file manager (I use 7-zip)
2. move the vue.tmLanguage file outside the archive and edit it, replace occurrences of "sass" with "scss"
3. Close sublime, and drag the file back into the package archive

[WangHansen]

Combine the answer with @Doeke and @mrliptontea
You can install whatever package you like:

I installed

1. Sass
2. Syntax Highlighting for Sass
3. Vuejs complete package
4. Vuejs Syntax Highlight

If you installed both 3 and 4, in sublime, you will see two "Vue component" syntax when you click bottom right
So there will be two 'vue.tmLanguage' file under \Installed Packages\Vuejs Complete Package.sublime-package and \Installed Packages\Vuejs Syntax Highlight.sublime-package, you can apply fix to either one of them or both by

Remove the <dict> tag that includes source.sass under <string>source.scss.embedded.html</string>.

Or

Replace occurrences of "sass" with "scss"

If you only apply fix to one file and it doesn't work, try to switch to another "Vue component" syntax, also you need to restart sublime to make the change

[petrpacas]

I'd like to endorse the way @Doeke did it 🎉

[mismith]

Because this issue still exists and I keep finding myself searching for how to do it again, here are my exact steps for a new machine, made into as simple a workflow as possible:

1. Install Vue Syntax Highlight using the package manager, as normal.
2. Close Sublime.
3. In ~/Library/Application Support/Sublime Text 3/Installed Packages, extract Vue Syntax Highlight.sublime-package using macOS-native Archive Utility.app
4. Copy the extracted Vue Syntax Highlight folder and its contents into ~/Library/Application Support/Sublime Text 3/Packages/User (or Dropbox-symlinked equivalent)
5. Do the trick above (remove the <dict> entry from vue.tmLanguage)
6. Delete ~/Library/Application Support/Sublime Text 3/Installed Packages/Vue Syntax Highlight.sublime-package (since we now want to use the extracted user version).
7. Re-open Sublime.

[lostkeys]

I just want to add to @Doeke's answer that you can edit the vue.tmLanguage file directly in sublime using the Package Resource Viewer.