Vue-loader: How to use "scss" in *.vue?

[geekingin]

I'm using vue2.0 rc.7 and vue-loader 9.5.
I cannot figure out how to use scss in vue file.
If i write like this <style lang="scss">, there will be an error saying Cannot resolve module 'scss' in xxxxx.

I can only use scss with<style lang="sass">
However, webstorm's inspection will not accept it.

So, how can i use scss syntax directly in *.vue

[LinusBorg]

Hi @geekingin

thanks for filing this issue.

1. Can you format your post in a way we can read? (Edit: Thanks)
2. you likely have not set up the right loaders in you webpack config.

[geekingin]

@LinusBorg Sorry for the broken format.

I'm not sure, here is my loaders in webpack config.

module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/
        }, {
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.s[a|c]ss$/,
            loader: 'style!css!sass'
        }]
    }

Is it right?

[LinusBorg]

vue-loader infers the loader to use from the lang attribute's value, but there is no "scss-loader", only "sass-loader" (which handles both .scss and .sass styles).

So you have to tell vue-loader to use sass-loader for scss:

module: {
  loaders: [{
    test: /\.js$/,
    loader: 'babel',
    exclude: /node_modules/
  }, {
    test: /\.vue$/,
    loader: 'vue'
  }, {
    test: /\.s[a|c]ss$/,
    loader: 'style!css!sass'
  }]
},
vue: {
  loaders: {
    scss: 'style!css!sass'
  }
}

[geekingin]

That's exactly what i'm looking for, thanks a lot!

[runrunmeme]

great resolution!!! thanks!

[weepy]

trying this .. I get

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'vue'. These properties are valid:

any ideas ?

[LinusBorg]

You are using webpack 2, which changed how to pass config to loaders:

https://vue-loader.vuejs.org/en/configurations/advanced.html

[fabd]

More to the point for my fellow googler's looking for scss and Vue 2 config:

The vue config in webpack-simple works for lang="scss" (after installing sass-loader and node-sass), but it does not include the ExtractTextPlugin.