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.問題解決，並不會報錯