umijs / cra-v5-with-mfsu-example

create-react-app v5 与 mfsu 一起使用的例子
11 stars 4 forks source link

按需引入antd@4,配置ant-prefix后,组件样式失效。 #2

Closed heromac closed 1 year ago

heromac commented 1 year ago

js:

import { ConfigProvider, Button, Input } from 'antd'

<ConfigProvider prefixCls={'app1'}>
        <Button>OK</Button>
        <Input value={1123123123} />
    </ConfigProvider>

webpack.config.js

{
              test: /\.less$/,
              use: [
                require.resolve('style-loader'),
                require.resolve('css-loader'),
                require.resolve('postcss-loader'),
                require.resolve('resolve-url-loader'),
                {
                  loader: require.resolve('less-loader'),
                  options: {
                    lessOptions: {
                      modifyVars: {
                        'ant-prefix': 'app1'
                      },
                      javascriptEnabled: true,
                      relativeUrls: false,
                    },
                    sourceMap: true,
                  },
                }
              ],
              sideEffects: true,
            },

babel.config.js:

module.exports = function () {
  const plugins = [
    [
      "import", {
        "libraryName": "antd",
        "style": true
      }
    ],
  ];
  return {
    plugins,
  };
}

结果:样式前缀还是默认的ant,而非app1

fz6m commented 1 year ago
  new MFSU({
+   depBuildConfig: {
+     theme: { 'ant-prefix': 'app1' }
+   }
  })
heromac commented 1 year ago

this worked ! thks