antd4.0 定制主題

1、比如我在src下的styles文件建立了一個theme.js,　　這里不能用export 導出

const styles = {
  '@table-bg': '#FF0000',
  '@primary-color': '#FF0000',
  '@link-color': '#FF0000',
  '@success-color': '#FF0000',
  '@warning-color': '#FF0000',
  '@error-color': '#FF0000',
  '@font-size-base': '14px'
}

module.exports = {
  styles
}

　　

2、再config-overrides里引入      

addLessLoader({
　　modifyVars: styles　　　、、、、把引入的放在這里。
}),

const { styles } = require('./src/styles/theme')

const { 
  addWebpackAlias, 
  addLessLoader, 
  fixBabelImports, 
  override, 
  addDecoratorsLegacy 
} = require('customize-cra')
const path = require('path')

module.exports = override(
  // @ 修飾器
  addDecoratorsLegacy(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // 支持 less sass stylus
    style: true,
  }),
  // 支持 antd 主題定制
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: styles
  }),
  // 別名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@@': path.resolve(__dirname, 'src/components'),
  })
)