element-plus 更換主題色報(bào)錯(cuò)問題
新建文件 /style/element/index.scss
// style/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #3F66D4,
),
)
);
// 如果你想導(dǎo)入所有樣式:
@use "element-plus/theme-chalk/src/index.scss" as *;
剛開始按照element-plus官網(wǎng)描述步驟添加净赴，在main.js中引入創(chuàng)建的文件，
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')
但是會(huì)有報(bào)錯(cuò)信息驮捍，如下：
./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. 必須寫在任何其他規(guī)則之前?
解決方案：
在項(xiàng)目vue.config.js配置文件中修改疟呐，解決sass變量報(bào)錯(cuò)問題
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: '@use "@/assets/style/element/index.scss" as *;'
}
}
}
}
main.js中引入的文件可以刪除了。
