New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support SASS syntax correctly #5

Closed
aidistan opened this Issue Nov 5, 2015 · 17 comments

Comments

Projects
None yet
4 participants
@aidistan
Collaborator

aidistan commented Nov 5, 2015

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

This comment has been minimized.

Collaborator

aidistan commented Nov 5, 2015

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

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

But can't you just write

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

and everything's happy-go-lucky?

@aidistan

This comment has been minimized.

Collaborator

aidistan commented Nov 5, 2015

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:

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

And you have tried:

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

as I suggested on #4?

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

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

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

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

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

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

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

Can we do the same they have:

vuejs/vue-syntax-highlight@22200e7

@hedefalk

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

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

@aidistan

This comment has been minimized.

Collaborator

aidistan commented Nov 5, 2015

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

@aidistan

This comment has been minimized.

Collaborator

aidistan commented Nov 5, 2015

{ 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

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

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

This comment has been minimized.

Collaborator

aidistan commented Nov 5, 2015

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

This comment has been minimized.

Owner

hedefalk commented Nov 5, 2015

Cool! I'll add to readme and close.

@hedefalk hedefalk closed this Nov 5, 2015

@laander

This comment has been minimized.

laander commented Jan 26, 2016

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

This comment has been minimized.

Collaborator

aidistan commented Jan 26, 2016

@laander Thxs.

@FTAndy

This comment has been minimized.

FTAndy commented Oct 10, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment