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>
*/