Vue-loader: Webpack log a Err about "Module not found: Error: Can't resolve 'scss-loader'" when I use "<style lang="scss" scoped>" in .vue file

[qidaneix]

when I use

<style lang="scss" scoped>
@import '../scss/variables.scss';

main {
  color: $red;
}
</style>

in .vue file, and compile it with vue-loader. What's more, I want to extract the css as a separate file. So I config the webpack like this:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
    filename: '[name].[hash].css'
});
const config = {
    //...

    module: {
        rules: [
             {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        options: {
                            loader: {
                                css: extractSass.extract({
                                    use: [
                                        {
                                            loader: 'css-loader',
                                            options: {
                                                sourceMap: true
                                            }
                                        }, {
                                            loader: 'sass-loader',
                                            options: {
                                                sourceMap: true
                                            }
                                        }
                                    ],
                                    fallback: 'vue-style-loader'
                                })
                            }
                        }
                    }
                ],
                include: [srcPath]
            },
            //...
        ]
    },

    plugins: [
        extractSass,
        //...
    ]
};

module.exports = config;

when I webpack it, it comes out a error:

Module not found: Error: Can't resolve 'scss-loader' in '...'

Could you help me with that? thx.

[squirmy]

Same as the previous issue I raised #724

[squirmy]

@qidaneix actually now that I look closer - this isn't about unit testing at all!

You can take a look at the webpack template for an example of how to get scss working:
https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js

I'd recommend using the webpack or webpack simple templates as a starting point. For your vue projects / experiments.