Vue-loader: do not support .sass files very well

[Jinjiang]

<style lang="scss">
  body {
    margin: 0
  }
</style>

and

<style lang="sass">
  body
    margin: 0
</style>

do not work, but

<style lang="sass">
  body {
    margin: 0
  }
</style>

does.

And directly using sass-loader is well. both .scss and .sass files:

require('!style!css!sass?indentedSyntax!./foo.sass')
require('!style!css!sass!./foo.scss')

[Jinjiang]

I tried to add some code in loader(part, lang)

  function loader(part, lang) {
    if (lang === 'sass') {lang = 'sass?indentedSyntax'}
    if (lang === 'scss') {lang = 'sass'}
    lang = lang || defaultLang[part];
    var loader = loaders[lang] !== undefined ? loaders[lang] : loaderPrefix[part] + lang;
    return loader ? loader + '!' : '';
  }

but

<style lang="sass">
  body
    margin: 0
</style>

still not work

[sjoerdvisscher]

This works:

<style lang="sass?indentedSyntax">
  body
    margin: 0
</style>

[sjoerdvisscher]

Or alternatively in the webpack config file:

        test: /\.vue$/, loader: vue.withLoaders({
          sass: "style!css!sass?indentedSyntax"
        })

[Jinjiang]

Thx

[tommymarshall]

Can the docs be updated on the main site if it only works with the added indentedSyntax lang?

[NemoAlex]

+1
Need to be add to the documentation.

[im-n1]

wel... more than one year later and I ran into this again. The docs really needs to updated.

[vladfaust]

You should add

vue: {
  loaders: {
    sass: "vue-style-loader!css-loader!sass?indentedSyntax"
  }
}

into your webpack.config.js's module.exports section to make indentation sass syntax work (note that scss will not).