[ant-design/ant-design-pro]主题样式的less文件怎么改成js文件啊?

antd pro里样式文件是theme.js,我按照antd的配置设置了less,代码如下

@import '~antd/lib/style/color/colors.less';

@custom-bg: #1b1c1f;
@custom-combg: #24282a;
@custom-combg-hover: #242424;

@body-background : @custom-bg;
// Base background color for most components
@component-background : #2A2A2A;

@heading-color          : fade(#fff, 100%);
@text-color             : fade(#fff,85%);
@text-color-secondary   : fade(#fff, 65%);

@text-color : fade(#fff, 65%);
@text-color-secondary : fade(#fff, 45%);

@item-active-bg : @blue-5;
@item-hover-bg : @blue-5;

@menu-bg: @custom-combg;
// @menu-item-color: #00f0ff;

// @btn-default-color: #00f0ff;

@btn-default-bg: @custom-combg;
// @btn-default-border: #00f0ff;

@layout-body-background : @custom-bg;

@table-header-bg: @custom-combg;
@table-header-sort-bg: @custom-combg;
@table-row-hover-bg: @custom-combg-hover;
@table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb;

@disabled-color         : fade(#fff, 25%);
@disabled-bg            : @background-color-base;

我想知道怎么转换成theme.js, 主要是这种@blue-5, fade(#fff, 25%)怎么引入

shadiniao

为什么有这个需求？

chenshuai2144

我看官网上定制主题有两种方案一是theme , 二是less 建了个antd项目,用less的方式写完了然后想把这个样式放到antd pro中,但antd pro是用的theme.js 但不太清楚fade(#fff, 25%)这种less中的函数,还有@blue-5这种在colors.less的变量要怎么在这个theme.js中引用

shadiniao

你可以把 pro 的也改成使用 less 的方式，这样比较容易点

chenshuai2144

我尝试在pro中使用less方式没成功,不知道问题在哪? 我是这样处理的,修改.webpackrc.js文件如下

const path = require('path');

export default {
  entry: 'src/index.js',
  extraBabelPlugins: [
    'transform-decorators-legacy',
    // ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],  原代码
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
  ],
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr'],
    },
  },
  alias: {
    components: path.resolve(__dirname, 'src/components/'),
  },
  ignoreMomentLocale: true,
  // theme: './src/theme.js', 原代码
  html: {
    template: './src/index.ejs',
  },
  disableDynamicImport: true,
  publicPath: '/',
  hash: true,
};

然后在src/index.js文件中,增加自定义的theme.less引入 import './theme_custom.less'; 但毫无效果

shadiniao

js引入的方式试出来了

module.exports = () => {
    return {
        'primary-color': 'fade(#23446F, 100%)',
        'body-background': '@blue-1',
    };
};

shadiniao

自己建的antd项目中,theme.js是可以直接引用@primary-color,@blue-5这种变量的

module.exports = () => {
    return {
        'border-color-split ': '@primary-color',
        'item-active-bg ': '@blue-5',
        };
};

但在antd pro中这种会报Variable @primary-color is undefined的错误

shadiniao

https://pro.ant.design/docs/theme-cn

试试官方的 demo

chenshuai2144

@shadiniao 我也遇到这个问题了，如果在theme.js中，如果尝试引用default.less中的变量会报错：Variable @primary-color is undefined，别的情况都OK的。请问你有解决吗？

huangzhuolin

[ant-design/ant-design-pro]主题样式的less文件怎么改成js文件啊?

回答