vite + react + antd 的主题配置

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

Hope is a good thing, maybe the best of things. And no good thing ever dies.

前言

在之前的文章中，自己写过一篇关于 vite + react 的文章，主要介绍了自己基于 vite 的 react 项目的脚手架搭建 : vite + react + antd 搭建一个单页面应用。但是在我们的项目中，通常会做一个自己的主题配色和样式布局。在实际的项目中，为了满足业务和品牌上多样化的视觉需求，全局样式（主色、圆角、边框）和指定组件的视觉要支持定制。我们可以定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

vite 的样式变量定义方式

本文是基于 scss 的预处理方式进行配置

使用css.preprocessorOptions 指定传递给 CSS 预处理器的选项。在 additionalData 配置样式的环境变量。

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$primary-color: #1890ff;$title-color: rgba(0,0,0,.8);`
      }
    }
  }
})

往往我们的项目中会定义很多的变量，如果都写在上面的话，还是比较麻烦的，所以需要单独去维护我们的主题文件

theme的主题配置方式

在 theme/my-theme.js 的文件中定义需要用到的主题变量

const theme = {
 '$primary-color': '#1890ff',
 "$title-color": 'rgba(0,0,0,.8)',
}

// 对象转为字符串
function generateViteData(object) {
  const arr = [];
  for (const key in object) {
    if (Object.hasOwnProperty.call(object, key)) {
      const element = object[key];
      arr.push(`${key}: ${element};`)
    }
  }

  return arr.join(' ')
}

// 将主题转为字符串
const themeString = generateViteData(theme)

export default themeString;

在 vite.config.js 中引入 theme

我们将定义好的主题变量引入到配置文件中。

import theme from './theme/my-theme';

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
        additionalData: theme, // 引入「主题」配置变量
      }
    }
  },
})

通过以上方式，我们就可以在单独的文件【my-theme.js】中配置我们需要的主题。

参考文献:

• #css-preprocessoroptions
• #additionaldata

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏

欢迎关注我的微信公众号，一起交流技术，微信搜索 🔍 ：「 五十年以后 」