Open liuxinqiong opened 2 years ago
Describe the bug When i use this library to generate antd theme, it's failed. And the error is throwed by less, just as the title say.
The important thing that i must need to clarify is, it's not the less version problem. my less version is v3.9.0.
After some debugger, I found the reason is that less content is invalid, I write the antdLess variable to file by using the below code.
antdLess = `${antdLess}\n${varsCombined}`; // fs.writeFileSync(path.join(nodeModulesPath, '../test.less'), antdLess) const { css: antCss } = await render(antdLess, [antdPath, antdStylesDir]); const allCss = `${antCss}\n${userCustomCss}`; results = await postcss([reducePlugin]).process(allCss, { from: antdStylesFile, }); css = results.css;
At the end of the file, some size variable be writen to color value. just like this, it's why less compile error.
@steps-dot-size: #e10fa1; @steps-current-dot-size: #d32868; @steps-description-max-width: #85d7d4; @steps-nav-content-max-width: #590433; @result-subtitle-font-size: #27fd6d; @image-bg: #d64eac; @image-color: #f48295; @image-mask-font-size: #83309c; @image-preview-operation-size: #732cd5; @image-preview-operation-color: #c31a6d; @image-preview-operation-disabled-color: #275807;
Show your code
const path = require('path'); const fs = require('fs'); const { generateTheme, getLessVars } = require('antd-theme-generator'); // note: the reason i passed "../../" token, becasue i'm in a monorepo project. const antDir = path.join(__dirname, '../../node_modules/antd'); const defaultVars = getLessVars(`${antDir}/lib/style/themes/default.less`); const darkVars = { ...getLessVars(`${antDir}/lib/style/themes/dark.less`), '@primary-color': defaultVars['@primary-color'], '@picker-basic-cell-active-with-range-color': 'darken(@primary-color, 20%)', }; const lightVars = { ...getLessVars(`${antDir}/lib/style/themes/compact.less`), '@primary-color': defaultVars['@primary-color'], }; fs.writeFileSync('./src/dark.json', JSON.stringify(darkVars)); fs.writeFileSync('./src/light.json', JSON.stringify(lightVars)); const options = { antDir, stylesDir: './src/config', // note: these is no less file in that directory, beceuse i just need it process antd component, except my custom component. the reason that i passed it, because generateTheme api need it. themeVariables: Array.from( new Set([...Object.keys(darkVars), ...Object.keys(lightVars), ...Object.keys(defaultVars)]), ), outputFilePath: path.join(__dirname, './public/color.less'), }; generateTheme(options) .then((less) => { console.log('Theme generated successfully'); }) .catch((error) => { console.log('Error', error); });
I've spent two days on it. I need some help desperately. Looking forward to a reply, thanks.
Screenshots
Version v1.2.11
Hello! I ran into the same issue, removing strictMath: true from the less-loader options in the webpack config fixed it. This was with the base antd package, but hopefully it's still applicable to your case.
strictMath: true
Describe the bug When i use this library to generate antd theme, it's failed. And the error is throwed by less, just as the title say.
The important thing that i must need to clarify is, it's not the less version problem. my less version is v3.9.0.
After some debugger, I found the reason is that less content is invalid, I write the antdLess variable to file by using the below code.
At the end of the file, some size variable be writen to color value. just like this, it's why less compile error.
Show your code
I've spent two days on it. I need some help desperately. Looking forward to a reply, thanks.
Screenshots![image](https://user-images.githubusercontent.com/20576218/165952438-f81ef982-836b-41b3-98dc-18476a74c1c9.png)
Version v1.2.11