const CracoLessPlugin = require('craco-less');
const pxToViewport = require('postcss-px-to-viewport-8-plugin');

module.exports = {
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            pxToViewport({
              viewportWidth: 1920, // 设计稿宽度
              unitPrecision: 5, // 单位转换后保留的精度
              viewportUnit: 'vw', // 希望使用的视口单位
              selectorBlackList: [], // 需要忽略的CSS选择器
              minPixelValue: 1, // 小于或等于`1px`不转换为视口单位
              mediaQuery: false, // 允许在媒体查询中转换`px`
            }),
          ],
        },
      },
    },
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@primary-color': '#1890FF',
              '@primary-color-hover': '#3B7CFF',
              '@error-color': '#F55E55',
              '@text-color': '#3B4859',
              '@menu-dark-bg': '#0052D9',
              '@layout-body-background': '#eeeeee',
              '@height-base': '36px',
              '@form-vertical-label-padding': '0 0 10px',
              '@normal-color': '#EFF1F5',
              '@label-color': '#3B4859',
              '@card-background': '#fbfbfb',
              '@heading-color': '#3B4859',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};