Support SASS syntax correctly

[hedefalk]

Support SASS syntax correctly

[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:

[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 [email protected] 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