Double colon Error

[aylabbs]

I am trying to override @collapse-content-padding

This is my craco.config.js:

const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@primary-color": "#1DA57A",
          "@link-color": "#1DA57A",
          '@collapse-content-padding:': '0px' ,
        },
      },
    },
  ],
};

if I remove the line with that customization and just leave the other 2, it works fine.

with '@collapse-content-padding:': '0px' , I get this error:

./node_modules/antd/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-9-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-9-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-9-4!./node_modules/antd/dist/antd.less)
Error: resolve-url-loader: CSS error
  file://path/to/project/node_modules/antd/lib/collapse/style/index.less:96:6: Double colon
You tried to parse Less with the standard CSS parser; try again with the postcss-less parser
  You tried to parse Less with the standard CSS parser; try again with the postcss-less parser

fwiw, here is the antd .less it is referencing:

  &-content {
    color: @text-color;
    background-color: @collapse-content-bg;
    border-top: @border-width-base @border-style-base @border-color-base;

    & > &-box {
      padding: @collapse-content-padding; // this line
    }

    &-hidden {
      display: none;
    }
  }

Somehow this customization is putting in a second colon? I don't get what I am doing wrong or why the other 2 customized variables work fine...

[zilan830]

I got the same question. Have you solve it ?

[zilan830]

hahahah 我找到问题了，哈哈哈哈哈哈哈哈，我俩居然犯了一样的问题。 '@collapse-content-padding:': '0px' 前面的key值多了一个冒号。

[kamronbatman]

Yeah, you need to remove the colon inside of the single quotes.