VueプロジェクトでのSassのインストール

VueプロジェクトでのSassのインストール

1. sass-loaderはnode-sassに依存しているため、node-sassをインストールします

cnpm install node-sass --save-dev       //安装node-sass

cnpm install sass-loader --save-dev         //安装依赖包sass-loader

cnpm install style-loader --save-dev        //安装style-loader

 

2.ビルドフォルダのwebpack.base.conf.jsのモジュールの下にあるルールに構成を追加します

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

3.sassが必要な場所にlang = scssを追加します

 

 

注:sassのインストールに問題があり  ます。npmrundevを実行して、エラーを報告してください。 

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

これは、sassの現在のバージョンが高すぎて、Webpackのコンパイル中にエラーが発生したためです。現時点では、低いバージョンに変更するだけで済みます。変更方法を以下に説明します。次のように、「sass-」を含むpackage.jsonファイルを見つけるのは非常に簡単です。 「ローダー」バージョンを置き換えるだけです。

 解決:

	
将 "sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1",

 

 最初に現在のバージョンをアンインストールしてから、指定したバージョンをインストールすることもできます

卸载当前版本   npm uninstall sass-loader
安装     npm install [email protected] --save-dev

  

参照リンク: 

Vueインストールノード-sassコンパイルエラー https://blog.csdn.net/ze1024/article/details/100516650

vue-cli + webpackはvueプロジェクトを構築し、sassを使用してエラーを報告し、ピットを埋め ますhttps://www.cnblogs.com/x-llin/p/11737906.html

前処理Sass、LESS、Stylusの違いの概要 https://blog.csdn.net/pedrojuliet/article/details/72887490

おすすめ

転載: blog.csdn.net/weixin_44360943/article/details/108715992