vueError——sass-loader

一、安装

1、安装sass的依赖包：

npm install --save-dev sass-loader

2、sass-loader依赖于node-sass,所以要安装node-sass：

npm install --save-dev node-sass

或官网：https://www.webpackjs.com/loaders/sass-loader/

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

（node-sass 和 webpack  是 sass-loader 的对等依赖）

二、配置

build/webpack.base.config.js

rules: [ 
 {
   test: /\.scss$/,
   use: [{
      loader: "style-loader" // 将 JS 字符串生成为 style 节点
   }, {
      loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
   }, {
       loader: "sass-loader" // 将 Sass 编译成 CSS
   }]
  }
]

三、在style中使用时声明

<style lang="scss" scoped>

 

四、安装后报错：

原因：因为当前sass的版本太高，webpack编译时出现了错误，只需要换成低版本：找到package.json文件，里面的 "sass-loader"的版本更换掉

本地是："sass-loader": "^8.0.0"，   更换成 "sass-loader": "^7.3.1",

还有一种方法

卸载当前版本   npm uninstall sass-loader
安装     npm install sass-loader@7.3.1 --save-dev

我用上面的方法还是报错，用下面的方法运行成功