vite: 项目中添加 px2rem/rem/postcss/styled-component 插件

项目中添加 rem 配置

安装

yarn add --dev postcss-pxtorem \
               babel-plugin-styled-components \
               babel-plugin-styled-components-px2rem

配置

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// @ref: https://github.com/ben-rogerson/twin.examples/blob/master/vite-styled-components-typescript/vite.config.ts
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'styled-components-px2rem',
            {
              rootValue: 16,
              unitPrecision: 5,
              propList: ['*']
            }
          ],
          'styled-components'
        ]
      }
    })
  ]
});

postcss 配置

export default {
  plugins: {
    'tailwindcss': {},
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 16,
      unitPrecision: 5,
      propList: ['*']
    }
  }
};

参考

• https://github.com/ben-rogerson/twin.examples/blob/master/vite-styled-components-typescript/vite.config.ts
• https://blog.csdn.net/lan123456_/article/details/133907761