Support SASS syntax correctly

[aidistan]

There are two syntaxes available for Sass. The new one, known as SCSS (Sassy CSS) and recommanded by Sass, is an extension of the syntax of CSS and more widely used today. And the sass loader for Webpack, sass-loader, only processes .scss files as described in its document.

Thus we have to write styles like this in .vue files

<style lang="sass">
</style>

which should be highlighted in SCSS syntax, not in SASS syntax.

It's a little weird. So I open this issue for discussion instead of sending a PR to correct directly.

[aidistan]

And I found this issue is somehow related to #4.

[hedefalk]

But can't you just write

<style lang="scss">
</style>

and everything's happy-go-lucky?

[aidistan]

There is no special handling for this in vue-loader. The lang attribute will be passed directly to find a corresponding loader, which raises loader-not-found errors when I write like that.

Related lines:

• https://github.com/vuejs/vue-loader/blob/master/lib/parser.js#L18
• https://github.com/vuejs/vue-loader/blob/master/lib/loader.js#L67
• https://github.com/vuejs/vue-loader/blob/master/lib/loader.js#L86

[hedefalk]

And you have tried:

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

as I suggested on #4?

[hedefalk]

AH, ok I see. So no abstraction there - that's just for file name ending. Ok…

[hedefalk]

Please check how they handle it in the sublime package then and we'll do the same?

[hedefalk]

Too bad if we can't support old sass simutanously though…?

[hedefalk]

Can we do the same they have:

vuejs/vue-syntax-highlight@22200e7

[hedefalk]

Or does that mean that they just threw away old sass highlighting and mapped both scss and sass to sass?

[aidistan]

Yeah. I think we should just throw away the old sass highlighting (sass) and mapped both scss and sass to scss (not sass)?

[aidistan]

{ test: /.scss$/, loader: "style!css!sass" } only works for .scss files processed by Webpack, not for <style lang="scss">...</style> codes. Since the latter one has already been processed by vue-loader through scss-loader (not exists, will raise an error).

The problem has existed for a loong time, and not well been handled by vue-loader and vue-syntax-highlight. I guess maybe the majority of the Vue community are Sublime - Stylus guys 😓

[hedefalk]

Please consider PR for mapping both to scss then and I'll release right
away.

On Thu, Nov 5, 2015 at 10:31 AM Aidi Stan notifications@github.com wrote:

{ test: /.scss$/, loader: "style!css!sass" } only works for .scss files
processed by Webpack, not for <style lang="scss">...</style> codes. Since
the latter one has already been processed by vue-loader through
scss-loader (not exists, will raise an error).

The problem has existed for a loong time, and not well been handled by
vue-loader and vue-syntax-highlight. I guess maybe the majority of the
Vue community are Sublime - Stylus guys [image: 😓]

—
Reply to this email directly or view it on GitHub
#5 (comment).

[aidistan]

Finally I manage to find a way to fix this by adding following lines in webpack.config.js:

module.exports = {
  // ...
  vue: {
    loaders: {
      scss: 'style!css!sass'
    }
  }
};

Now we can support both sass and scss simutanously in this way.

I suggest to add a notice for this common pitfall:

Since the current version of vue-loader cannot handle correctly with sass/scss with defaults, following lines are suggested to be added to your webpack.config.js:

vue: {
  loaders: {
    sass: 'style!css!sass?indentedSyntax',
    scss: 'style!css!sass'
  }
}

[hedefalk]

Cool! I'll add to readme and close.

[laander]

Just FYI, vue-loader seems to be using it's own fork of style-loader per default (vue-style-loader), so i had to install style-loader in order for Webpack not to break. Using the vue one instead, you could do this:

vue: {
  loaders: {
    sass: 'vue-style!css!sass?indentedSyntax',
    scss: 'vue-style!css!sass'
  }
}

[aidistan]

@laander Thxs.

[FTAndy]

@laander your way is not useful for me, I have to add style-loader in this vue-loader version

[andre-brdoch]

How would a solution for a nuxt project look like? Nuxt is taking care of the webpack config, and I am not sure what is the correct way to extend it.

Syntax highlighting looks a bit off: