vue2プロジェクト、node-sassをdart-sassに置き換え、エラーを報告します

1.元のプロジェクトpackage.jsonのsass情報部分:

  "node-sass": "^4.12.0",
  "sass-loader": "^8.0.2",

2つ目は、node-sassをdart-sassに置き換えます

元のプロジェクトのnode-sassモジュールを削除し、dart-sassに置き換えます。コマンドは次のとおりです。

yarn remove node-sass 
yarn add sass-loader sass -D 

現時点でのpackage.jsonのsassに関する情報は次のとおりです。

 "sass": "^1.32.8",
 "sass-loader": "^11.0.1",

プロジェクトを開始しましたが、エラーが次のように報告され
error in .vue?vue&type=style&index=0&lang=scss& Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function
ましたgetOptionsプロジェクトでエラー報告する方法を使用しませんでした
ここに画像の説明を挿入

三、解決策

sass-loaderを元のプロジェクトのバージョンにダウングレードすると、成功しました。

yarn add sass-loader@8.0.2
 "sass": "^1.32.8",
 "sass-loader": "^8.0.2",

参照:https//stackoverflow.com/questions/58546521/node-sass-and-sass-loader-module-build-failed-typeerror-this-getresolve-is-n

4、sassグローバル変数を構成します

vue.config.js

module.exports={
    
    
	 css: {
    
    
    loaderOptions: {
    
    
      // variable.scss 文件放在src/assets/style/variable.scss ,里面是一些要用到的全局变量,
      sass: {
    
    
        prependData: `@import "@/assets/style/variable.scss" ;`
      }
    }
  }
}
/*
variable.scss的内容如下:
$icon_color: #5d7eb2;
$border_color: #ebeef5;
$header_bg: #409eff;
$title_bg: #f5f5f5;
它配置好以后,即可在任意组件中写sass的地方用了,如:
<style lang="scss">
  .my__icon {
    color: $icon_color;
    font-size: 18px;
  }
</style>
*/

おすすめ

転載: blog.csdn.net/ddx2019/article/details/115352155