一安装:

    npm install node-sass --save-dev //安装node-sass     
    npm install sass-loader --save-dev //安装sass-loader 
    npm install style-loader --save-dev //安装style-loader

二、配置文件

在webpack.base.conf.js 文件下的配置 rules

    rules:[    
     ...
     { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别scss!
        test: /\.scss?$/,
        loaders: ["style", "css", "sass"]
     }
    ]

三、在vue模板组件中引用lange="scss"

    <style scoped>    
    ...
    </style>

四、如果启动报错,因为sass-loader版本过高导致,可以将其package.json中 的sass-loader版本改为7.3.1,然后再重新安装sass-loader包

    PS C:\web\admin.bschem.com> npm run dev    
    > admin.bschem.com@1.0.0 dev C:\web\admin.bschem.com
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
     14% building modules 35/79 modules 44 active ...0!C:\web\admin.bschem.com\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
     94% asset optimization                                                                 
     ERROR  Failed to compile with 1 errors                                                                                                                 下午3:41:53
    Module build failed: TypeError: this.getOptions is not a function
        at Object.loader (C:\web\admin.bschem.com\node_modules\sass-loader\dist\index.js:25:24)
     @ ./src/style/index.scss 4:14-198 13:3-17:5 14:22-206
     @ ./src/main.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

先卸载当前版本

    npm uninstall sass-loader

安装低版本的7.31

    npm install sass-loader@7.3.1 --save-dev