如何在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";`
      }
    }
  }
};