element-plus 更换主题色 SassError: @f

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中引入的文件可以删除了。