; are considered syntax error under sass style tags

[ShayDavidson]

less works fine for example

[hedefalk]

Well, aren't ; syntax error in old sass? I'm not expert, only used less and scss (sass2).

Look here:

https://github.com/hedefalk/atom-vue/blob/master/grammars/vue.cson#L158
vs
https://github.com/hedefalk/atom-vue/blob/master/grammars/vue.cson#L187

[hedefalk]

Sorry, Sass 3 that is.

[ShayDavidson]

Well, yes, but:

• when the lang is sass, the new syntax (with semicolons) is compiled, but Atom shows a syntax error on the semicolons.
• when the lang is scss, Atom doesn't show any syntax error for the semicolon, but vue/webpack can't find a scss-loader module for compilation.

(using webpack and vue-loader for compilation).
Maybe it's a config problem on my side, but I can't seem to fix it.
Anyway, I now realize this is not an issue with your package, hence closing it.

[hedefalk]

I'm successfully using webpack with

{ test: /.scss$/, loader: "style!css!sass" },

in webpack.config.js

and

"sass-loader": "~2.0.1",
"css-loader": "~0.17.0",
"style-loader": "~0.12.3",

in package.json -> devDependencies

Oh, wait, maybe I'm not… I'm not actually using any styling in my components there, seems to be on the side…

Please consider PR if you find any solution. This package was just something I auto-created for my own use mechanically (with a script) from the sublime one: https://github.com/vuejs/vue-syntax-highlight at a particular commit: vuejs/vue-syntax-highlight@4796727

Any work there by @yyx990803 et al hasn't been merged in here since.

[hedefalk]

I'm not sure, but I would guess that https://github.com/vuejs/vue-loader simply delegates to a matching loader. So if you write lang=scss in your .vue to make this atom plugin happy, you need to have:

{ test: /.scss$/, loader: "style!css!sass" },

and not

{ test: /.sass$/, loader: "style!css!sass" },

in your webpack config. Can this be the issue?

[aidistan]

Please try the workaround @ShayDavidson