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