antd_less_v6_bug's Introduction

This is a demo repo to reproduce the less loader issue

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/button/style/index.less)
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'source'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap? }

Workaround

$ yarn remove less-loader

// less-loader v6.0.0 is not working
$ yarn add [email protected]

Reproduce Step

create repo by create-react-app

packages may need to install: `babel-plugin-import` `customize-cra` `less-loader` `react-app-rewired`

follow the Customize Theme docs by antd

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      // See all variables here:
      // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
      modifyVars: {
        '@layout-header-background': '#0D223D',

      }
    },
  })
)

Add a <Button> from antd to your App.js and start server

possible reason

Caused by customize-cra package

https://github.com/arackaf/customize-cra/blob/404854bcbe7436f5834e4c4863001610951d5c3c/src/customizers/webpack.js#L167-L169

antd_less_v6_bug's People

Contributors

Watchers

antd_less_v6_bug's Issues

Workaround doesn't work

Thank you for your workaround - I tried to use it but get another error.

git clone https://github.com/ant-design/create-react-app-antd
yarn
yarn remove less-loader
yarn add [email protected]
yarn start
Got error:

Failed to compile.

./node_modules/antd/es/date-picker/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/date-picker/style/index.less)

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /app/node_modules/antd/es/style/color/bezierEasing.less (line 110, column 0)

I use the following Dockerfile: