首先先在src文件夹下建一个style文件夹,再在style文件夹下面建一个element文件夹
再建一个scss文件
文件目录如下
如果我们要给elementplus设置主题色
在style.scss文件里
首先使用 @forward
导入 Element Plus 的变量,再设置elementplus的主题色
@forward "element-plus/theme-chalk/src/***mon/var.scss" with (
$colors: (
"primary": (
"base": #1baeae,
),
),
);
这样我们就完成了组件库主题色的设置,如果我们想在组件里使用它
<style lang="scss" scoped>
@import "@/style/element/custom-element.scss";
</style>
但是如果我们想在整个项目全局使用它
在main.js
中使用import
语句引入该scss文件即可
import './style/element/style.scss';
我们需要配置vite.config.js文件
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: '@import "@/styles/element/element.scss";'
}
}
}
}