wuzekang / antd-theme

Provide runtime dynamic theme for ant design.
https://wuzekang.github.io/antd-theme
55 stars 14 forks source link

Failed to compile dark theme using customize-cra #9

Open rafaelncarvalho opened 3 years ago

rafaelncarvalho commented 3 years ago

I'm getting this error when using customize-cra

./node_modules/antd/es/list/style/index.less

    & when (@theme = dark) {
      background: @list-customize-card-bg;
    ^
Error evaluating function `if`: Cannot read property 'eval' of undefined
      Error in ./node_modules/antd/es/list/style/customize.less (line 9, column 6)

this is my config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
  addPostcssPlugins,
  adjustStyleLoaders,
  addWebpackPlugin,
} = require('customize-cra')
const AntdThemePlugin = require('antd-theme/plugin')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
    },
  }),
  adjustStyleLoaders(loaders => {
    loaders.use[0] = {
      loader: AntdThemePlugin.loader,
    }
  }),
  addWebpackPlugin(
    new AntdThemePlugin({
      themes: [
        {
          name: 'dark',
          filename: require.resolve('antd/lib/style/themes/dark.less'),
        },
      ],
    })
  )
)

if I remove the dark theme, it works just fine. With compact theme works too

wuzekang commented 3 years ago

I can't reproduce your problem, can you provide a repo that can be reproduced?

donwojtallo commented 3 years ago

I have similar problem, only with dark theme. Example errors:

Failed to compile.

./node_modules/antd/es/empty/style/index.less

    &-ellipse {
      fill-opacity: 0.08;
    ^
Error evaluating function `if`: Cannot read property 'eval' of undefined
      in C:\**\antd\es\empty\style\index.less (line 59, column 6)
Failed to compile.

./node_modules/antd/es/button/style/index.less

.button-color(@color; @background; @border) {
  color: @color;
^
Error evaluating function `if`: Cannot read property 'eval' of undefined
      in C:\**\antd\es\button\style\mixin.less (line 143, column 2)

I created a repo here: https://github.com/donwojtallo/react-enterprise-starter-pack/tree/antd-theme-issue (use antd-theme-issue branch)

hmz22 commented 3 years ago

I have similar problem, only with dark theme. Example errors:

Failed to compile.

./node_modules/antd/es/empty/style/index.less

    &-ellipse {
      fill-opacity: 0.08;
    ^
Error evaluating function `if`: Cannot read property 'eval' of undefined
      in C:\**\antd\es\empty\style\index.less (line 59, column 6)
Failed to compile.

./node_modules/antd/es/button/style/index.less

.button-color(@color; @background; @border) {
  color: @color;
^
Error evaluating function `if`: Cannot read property 'eval' of undefined
      in C:\**\antd\es\button\style\mixin.less (line 143, column 2)

I created a repo here: https://github.com/donwojtallo/react-enterprise-starter-pack/tree/antd-theme-issue (use antd-theme-issue branch)

Anyone can help for fix it?

bcowell commented 3 years ago

Also getting this error

dumbbell0720 commented 3 years ago

我也是这个问题 Failed to compile ./node_modules/antd/es/empty/style/index.less

&-ellipse {
  fill: @white;
^

Error evaluating function if: Cannot read property 'eval' of undefined