项目配置

全局scss变量

文件路径

src/styles/variables.scss

作用

可以在项目内组件内和scss样式文件处使用定义的全局scss变量而无需引入

配置方式

// vite.config.js
css: {
    preprocessorOptions: {
    //define global scss variable
    scss: {
      additionalData: `@import '@/styles/variables.scss';`,
    },
  }
}

Naive UI主题调整

Naive UI提供了调整主题变量的选择，可以通过设定 n-config-provider 的 theme-overrides 来调整主题变量，具体方式可以参考Naive UI文档，此项目已经集成处理了，只需要修改src/store/modules/app.js文件的配置即可生效

import { defineStore } from 'pinia'
export const useAppStore = defineStore('app', {
  state() {
    return {
      themeOverrides: {
        common: {
          primaryColor: '#316c72',
          primaryColorSuppl: '#316c72',
          primaryColorHover: '#316c72',
          successColorHover: '#316c72',
          successColorSuppl: '#316c72',
        },
      },
    }
  },
})