如何更改 primevue 上的原色？

Question

我在 vue.js 项目上使用 Primevue，并通过以下方式导入主题 Deep Purple：

import 'primevue/resources/themes/mdc-light-deeppurple/theme.css';

现在我只想用自定义颜色修改主题（#673AB7）中的原色集。

我怎样才能做到这一点 ？

Answer 1

我将 primevue 主题.css文件复制到src/assets/_theme.scss（注意 .scss）。

然后在App.vue中，不导入vue主题，而是导入_theme.scss

<style lang="scss">
@import './assets/_theme.scss'; // copied from '~primevue/resources/themes/nova/theme.css'
@import '~primevue/resources/primevue.min.css'; //core css
@import '~primeicons/primeicons.css'; //icons
...

接下来，在 _theme.scss 中，搜索当前原色十六进制代码的所有值并将其替换为 $primary-color。这应该会产生一堆替代品。

$primary-color然后只需在文件顶部设置一个新变量即可。

//_theme.scss

$primary-color: #000;

如果您想在单个文件中定义所有 scss 变量并使它们可供每个 vue 组件使用而无需显式使用它们，则在项目根目录中@import创建/添加以下内容。vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/_variables.scss";`
      }
    }
  }
};