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.

[PeterA1]

After...

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

I found <style land="scss"> to work just fine.

[weishaoqiang]

i also have this probrem,and i can't resolve it

[weishaoqiang]

i have installed node-sass and sass-loader. my webpack config :

{
test: /.s[a|c]ss$/,
loader: 'style!css!sass'
}
vue: {
loaders: {
scss: 'css-loader!sass-loader' // <style lang="scss"
}
}

[tyrw]

I had a similar runaround, seems to work in webpack 2.5.1, vue-loader 7.3.0 with:

*.vue uses scss-loader (not scss)

<style lang="scss-loader">

config uses:

module: {
  rules: {
    ...
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          html: 'html-loader',
          js: 'babel-loader',
          scss: 'vue-style-loader!css-loader!sass-loader',
          // sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
        }
      }
    }
  }
},
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
},
resolveLoader: {
  alias: {
    'scss-loader': 'sass-loader',
  },
}

[Johnson27]

In my case, it still occurs when i use style-loader in vue-loader options, like this

{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader'
}
}

Then i resolve this problem by replacing style-loader with vue-style-loader!

{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader'
}
}

Hope this helps!

[parzh]

Shouldn't the test: regexp be /.s[ac]ss/ (without the vertical line)?

[zgayjjf]

@parzh You are right. However, /.s[a|c]ss/ also works, just a little redundancy. It's not "right", but it works.
And I'm sure you know why I wrote like that...

[xgqfrms]

{
      {
        test: /\.s(a|c)ss$/,
        // test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },
}

[ZehuaZhang]

Got it working only by above solution, with only one change - appending -loader to loaders entry
i.e. loaders: ['style-loader', 'css-loader', 'sass-loading']

{
      {
        test: /\.s(a|c)ss$/,
        // test: /\.sass$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
}

I'm using Vue 2, Webpack 4, Typescript, and all other packages updated to latest version

[dsldiesel]

Where do you place that? webpack.config is not accesible now, only vue.config.js!

[webfacer]

@dsldiesel sorry never mind what i posted before, i had to different configs
webpack.config.development.js and webpack.config.test.js :( and i do not know when this happend but i had to same codes with to different env. never mind this issue of mine

[Ditavonpita]

I still got the same problem when I use lang="scss" in the style-tag. Can someone help me? I'm using @vue/cli 4.5.4...

It says:

and this is my webpack.config.js File:

var path = require('path')
var webpack = require('webpack')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

I've already installed this $ npm install sass-loader node-sass webpack --save-dev as well

Thank you in advance for your help.

P.S.: I wanted to implement this: https://codesandbox.io/s/basetimer-no-parent-control-forked-y08vs?file=/src/components/BaseTimer.vue

[shetaraven]

I still got the same problem when I use lang="scss" in the style-tag. Can someone help me? I'm using @vue/cli 4.5.4...

It says:

and this is my webpack.config.js File:

var path = require('path')
var webpack = require('webpack')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

I've already installed this $ npm install sass-loader node-sass webpack --save-dev as well

Thank you in advance for your help.

P.S.: I wanted to implement this: https://codesandbox.io/s/basetimer-no-parent-control-forked-y08vs?file=/src/components/BaseTimer.vue

is there a solution for this problem? i also have the same problem.