1.第一步當然是安裝

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

或

cnpm install sass-loader node-sass vue-style-loader --D

2.然後去修改配置檔案webpack.base.conf.js

此檔案位於build資料夾下

module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
 
,
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader:
 
 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options:
 
 {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            },
            // 劃重點：前面都是預設的配置，下面的需要你加上去
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    }

3.使用

開始使用啦

// 注意，此處需宣告lang="scss"和type="text/scss"
// 特別是type="text/scss"。
// 而有些人說可以加上rel="stylesheet/scss"，但是我試了沒用，不知道為啥，我也沒深究  0.0
<style lang="scss" type="text/scss" scoped>
    @import "./sass/style.scss";
    .background {
        background: #0f0f0f;
        opacity: 0.4;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        .text{
            color: #f00
        }
    }
</style>