webpack+vue中，.vue文件中scss出不出来的问题

Question

1.在.vue文件中如果我在style里面加上lang="scss",编译出来就是这样的，

2.如果我吧.vue文件中的lang="scss"去掉，编译出来就是这样的

说明：
当然图二才是我想达到的效果，但是我又必须用scss去编写，尝试了很多方法都是没有办法把scss抽出来单独打包，求各位大神给我指点一下，感激不尽~~！
webpack.config.js配置如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'js/[name].[hash].js',
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8090
    },
    module: {
        rules: [{
            test: /\.vue$/,
            exclude: /node_modules/,
            include: /src/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: ExtractTextPlugin.extract({
                        use: [
                            'css-loader',
                            'sass-loader',
                        ],
                        fallback: 'vue-style-loader'
                    })
                }
            }
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            include: /src/,
            loader: 'babel-loader',
        }, {
            test: /\.css$/,
            use: [
                'style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1
                    }
                },
                'postcss-loader'
            ]
        }, {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'sass-loader',
                    'postcss-loader'
                ]
            })
        }, {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'imgs/[name]_[hash:7].[ext]'
            }
        }, {
            test: /\.pug$/,
            use: ['html-loader', 'pug-html-loader']
        }]
    },
    plugins: [
        // CSS样式提取
        new ExtractTextPlugin({
            filename: 'css/[name].[hash].css',
            allChunks: true
        }),
        //css加前缀
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [require('autoprefixer')({
                    browsers: ['last 5 versions']
                })]
            }
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            title: 'index page',
            filename: 'index.html',
        }),
    ]
}

然后再贴上我的.vue文件吧，

<template>
  <div id="app">
    <p><img src="./assets/logo.jpg"></p>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello world!'
    }
  }
}
</script>

<style lang="sass">
body {
  font-family: Helvetica, sans-serif;
  text-align: center;
  h1{
    font-size: 30px;
    font-weight: normal;
  }
  img{
    width: 400px;
  }
}
</style>