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!

[zhuzhuaicoding]

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.

[DmacMcgreg]

The newest Vue-Cli with webpack is missing the sass-loader in order for this to work.
Like mentioned above, you will be able to use <style lang="scss"> but only after installing sass-loader and node-sass

npm install sass-loader node-sass webpack --save-dev

[LinusBorg]

The newest Vue-Cli with webpack is missing the sass-loader in order for this to work.

We never included any of the preprocessor loaders - neither sass-loader, not less-loader or any other - because people probably only need one of those, so why install all of them?

This is is also not a secret, it's right in the template's documentation: https://vuejs-templates.github.io/webpack/pre-processors.html

[DmacMcgreg]

It is missing, though. In order for this to work, it needs to be included manually.
I understand the reasoning, but to get what the OP is asking to work, something that is missing needs to be added.

[claudewowo]

u can see this : https://github.com/keydone/newBlog/blob/develop/build/webpack.base.conf.js
It's a develop branch.