ant-design / ant-design-dark-theme

🌚 Dark theme variables of Ant Design
https://www.antdtheme.com/dark
MIT License
482 stars 34 forks source link

Instructions when using with create-react-app and react-app-rewired #12

Closed StallionV closed 4 years ago

StallionV commented 4 years ago

I am following the official instructions with create-react-app and have ant integrated. I currently override them variables using the customize theme info given here https://ant.design/docs/react/use-with-create-react-app#Customize-Theme using addLessLoader and config-overrides.js

If I follow instructions the usage instructions for dark theme in this case they dont work. import darkTheme from '@ant-design/dark-theme';

// webpack.config.js: less-loader { loader: 'less-loader', options: { modifyVars: darkTheme, }, },

Can you please help.

StallionV commented 4 years ago

Well I got it to work. Here is how you would do it

const darkTheme = require('@ant-design/dark-theme')
const { override, fixBabelImports, addLessLoader } = require('customize-cra')
console.log(darkTheme)
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: darkTheme.default
    })
  )