DocSpring / craco-antd

A craco plugin to use Ant Design with create-react-app
MIT License
234 stars 49 forks source link

options has an unknown property 'noIeCompat' #62

Closed RohimChou closed 5 months ago

RohimChou commented 3 years ago

I'm trying to override the antd less variable

Follow through the instruction from README, however this error occurred while running npm start:

 - options has an unknown property 'noIeCompat'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

image

I've try to get rid of this error for a while, can anyone shed me some light...

Steps to reproduce:

npx create-react-app test-project
cd test-project
npm install antd @craco/craco craco-antd

#modify package.json
...
+  "start": "craco start",
...

#add craco.config.js to project root
const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
    plugins: [
        { 
            plugin: CracoAntDesignPlugin,
            options: {
                customizeTheme: {
                    "@primary-color": "#ff0000"
                },
                lessLoaderOptions: {
                    noIeCompat: true
                }
            }
        },
    ],
};

# dependencies
"@craco/craco": "^6.1.2",
"craco-antd": "^1.19.0",
"antd": "^4.15.6",
"react": "^17.0.2",
"react-scripts": "4.0.3",

# run 
npm start

Thanks in advance!!

hsbtr commented 2 years ago

I used it like this

plugins: [
        {
            plugin: CracoAntDesignPlugin,
            options: {
                customizeTheme: {
                    '@primary-color': '#1DA57A'
                },
                /*lessLoaderOptions: {
                    modifyVars: {
                        '@primary-color': '#1DA57A'
                    },
                    strictMath: true,
                    noIeCompat: true,
                },*/
                //cssLoaderOptions: {
                //    modules: true,
                //    localIdentName: "[local]_[hash:base64:5]",
                //},
                babelPluginImportOptions: {
                    libraryDirectory: "es",
                },
            }
        },
]
jakeleectn commented 5 months ago

@RohimChou

options: {
    lessLoaderOptions: {
        lessOptions: {
            modifyVars: { 
                    "@primary-color": "#ff0000" 
            },
            noIeCompat: true
        },
    }
},

Put the noIeCompat: true in lessOptions. This will work.