Skip to content
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 · 18 comments
Closed

Support SASS syntax correctly #5

aidistan opened this issue Nov 5, 2015 · 18 comments

Comments

@aidistan
Copy link
Contributor

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
Copy link
Contributor Author

aidistan commented Nov 5, 2015

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

@hedefalk
Copy link
Owner

hedefalk commented Nov 5, 2015

But can't you just write

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

and everything's happy-go-lucky?

@aidistan
Copy link
Contributor Author

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
Copy link
Owner

hedefalk commented Nov 5, 2015

And you have tried:

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

as I suggested on #4?

@hedefalk
Copy link
Owner

hedefalk commented Nov 5, 2015

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

@hedefalk
Copy link
Owner

hedefalk commented Nov 5, 2015

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

@hedefalk
Copy link
Owner

hedefalk commented Nov 5, 2015

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

@hedefalk
Copy link
Owner

hedefalk commented Nov 5, 2015

Can we do the same they have:

vuejs/vue-syntax-highlight@22200e7

@hedefalk
Copy link
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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
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 [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
Copy link
Contributor Author

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
Copy link
Owner

hedefalk commented Nov 5, 2015

Cool! I'll add to readme and close.

@hedefalk hedefalk closed this as completed Nov 5, 2015
@laander
Copy link

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
Copy link
Contributor Author

@laander Thxs.

@FTAndy
Copy link

FTAndy commented Oct 10, 2016

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

@andre-brdoch
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants