vue里怎么用scss及报错解决

vue里怎么用scss

使用vue-cli搭建项目有内置的webpack方案，但是没有使用scss。vue提供了初始化的webpack模板，其中使用了vue-loader。vue-loader默认只支持sass,要是想要使用scss，必须安装node-sass和sass-loader，并修改相关webpack配置。具体操作如下：

依次执行以下命令 安装node-sass和sass-loader

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

若npm安装太慢，可以使用cnpm安装

修改相关webpack配置 打开webpack.base.config.js, 在module里的rules中加上：

  {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  },

如果要在vue文件中的style使用scss,则在 style处声明：

<style rel="stylesheet/scss" lang="scss" scoped>
    ...
</style>

错误解决

报错信息：

this.getResolve is not a function...

解决方式：

1.将package.json中的sass-loader的配置修改成低于8.0.0版本，我按照上述链接中的版本，修改成7.3.1

2.将安装的node_modules项目依赖删除，重新安装，将sass-loader版本变成7.3.1

3.重新运行项目 npm run dev

4.问题解决，并不会报错