vue 安装scss 和报错信息处理
一安装:
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