element-plus 更換主題色報錯問題

新建文件 /style/element/index.scss

// style/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #3F66D4,
    ),
  )
);

// 如果你想導入所有樣式:
@use "element-plus/theme-chalk/src/index.scss" as *;

剛開始按照element-plus官網描述步驟添加，在main.js中引入創建的文件，

import { createApp } from 'vue'
import './assets/style/element/index.scss' // 這里引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

但是會有報錯信息，如下：

./src/assets/style/element/index.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/style-resources-loader/lib??ref--9-oneOf-3-4!./src/assets/style/element/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: @forward rules must be written before any other rules.
   ?
21 │ ┌ @forward 'element-plus/theme-chalk/src/common/var.scss' with (
22 │ │   $colors: (
23 │ │     'primary': (
24 │ │       'base': #3F66D4,
25 │ │     ),
26 │ │   )
27 │ │ );
   │ └─^

@forward rules must be written before any other rules. 必須寫在任何其他規則之前?

解決方案：
在項目vue.config.js配置文件中修改，解決sass變量報錯問題

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@use "@/assets/style/element/index.scss" as *;'
      }
    }
  }
}

main.js中引入的文件可以刪除了。