React-starter-kit: How to use antd-mobile with babel-plugin-import in this project

[hyden-tan]

I want to add antd-mobile to featrue/redux, and use babel-plugin-import, in my webpack-config.js:

{
   test: reScript,
   loader: 'babel-loader',
   options: {
       plugins: [
          [
             'import',
              [
                {
                   style: true,
                   libraryName: 'antd-mobile',
                 },
              ],
         ],
       ],
       presets: ['es2015', 'stage-0', 'react'],
     },
  }

but it does not work.

[vince-fly]

i have the same issue.in Layout.js, import antdStyle from 'antd-mobile/dist/antd-mobile.less'; and export default withStyles(antdStyle,s)(Layout);
but the bundle file size is too bigger,total size 1.3MB

[hyden-tan]

This might help you

[tim-soft]

Here's how to modify the latest revision of webpack.config.js to load antd via babel-import-plugin, hope this helps!

_Importing CSS_

const config = {
  {stuff ...}

  module: {
    {stuff ...}

    rules: [
    {stuff ...}

      // Load antd here
      {
        test: /\.css$/,
        include: [/node_modules\/.*antd/],
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './tools/postcss.config.js',
              },
            },
          },
        ],
      },

      // Rules for Style Sheets
      {
        test: reStyle,
        exclude: [/node_modules\/.*antd/], // Don't load antd here!
        rules: [
          {stuff ...}
        ],

{a bunch of stuff ...}

// Only use babel-plugin-import in client side
clientConfig.module.rules[0].options.plugins = [...clientConfig.module.rules[0].options.plugins];
clientConfig.module.rules[0].options.plugins.push(['import', { libraryName: 'antd', style: 'css' }]);

export default [clientConfig, serverConfig];

_Importing LESS with theme support_

import lessToJS from 'less-vars-to-js';
import fs from 'fs';

// Where your theme.less file lives
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, '../src/components/antTheme.less'), 'utf8'));

const config = {
  {stuff ...}

  module: {
    {stuff ...}

    rules: [
    {stuff ...}

      // Load antd here
      {
        test: /\.less$/,
        include: [/node_modules\/.*antd/],
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "less-loader", // compiles Less to CSS
            options: {
              modifyVars: themeVariables,
            }
          }
        ],
      },

      // Rules for Style Sheets
      {
        test: reStyle,
        exclude: [/node_modules\/.*antd/], // Don't load antd here!
        rules: [
          {stuff ...}
        ],

{a bunch of stuff ...}

// Only use babel-plugin-import in client side
clientConfig.module.rules[0].options.plugins = [...clientConfig.module.rules[0].options.plugins];
clientConfig.module.rules[0].options.plugins.push(['import', { libraryName: 'antd', style: true }]);

export default [clientConfig, serverConfig];

[kolf]

ERROR in ./node_modules/css-loader??ref--6-rules-1!./node_modules/postcss-loader/lib??ref--6-rules-3!./node_modules/antd/lib/style/index.less
Module build failed: Error: Failed to find './themes/default'
in [
E:\code\react\react-starter-kitnode_modules\antd\lib\style
]
at resolveModule.catch.catch (E:\code\react\react-starter-kitnode_modules\postcss-import\lib\resolve-id.js:35:13)
at
@ ./node_modules/antd/lib/style/index.less 2:18-141 19:6-27:8 19:140-27:7 20:18-141
@ ./node_modules/antd/lib/button/style/index.js
@ ./src/routes/home/Home.js
@ ./src/routes/home/index.js
@ ./src/routes/index.js
@ ./src/router.js
@ ./src/client.js
@ multi @babel/polyfill ./tools/lib/webpackHotDevClient ./src/client.js

ERROR in ./node_modules/css-loader??ref--6-rules-1!./node_modules/postcss-loader/lib??ref--6-rules-3!./node_modules/antd/lib/button/style/index.less
Module build failed: Syntax Error

(7:1) Unknown word

5 | @btn-prefix-cls: ~"@{ant-prefix}-btn";
6 |

7 | // for compatibile
| ^
8 | @btn-ghost-color: @text-color;
9 | @btn-ghost-bg: transparent;

@ ./node_modules/antd/lib/button/style/index.less 2:18-147 19:6-27:8 19:146-27:7 20:18-147
@ ./node_modules/antd/lib/button/style/index.js
@ ./src/routes/home/Home.js
@ ./src/routes/home/index.js
@ ./src/routes/index.js
@ ./src/router.js
@ ./src/client.js
@ multi @babel/polyfill ./tools/lib/webpackHotDevClient ./src/client.js

[kolf]

@tim-soft 按上面配置报错了。。。

[langpavel]

@kolf in English please

[tim-soft]

You need to _exclude_ the ant-design dir from the default load, then _include_ the ant-design lib in your own loader chain.

1. Don't include these styles on server side
2. Don't use modules

// Rules for Ant-Design
      {
        test: /\.less$/,
        include: [
          /[\\/]node_modules[\\/].*antd/,
          resolvePath(SRC_DIR, 'components/antTheme.less'),
        ],
        use: [
          MiniCssExtractPlugin.loader,
          //'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: isDebug,
              minimize: isDebug ? false : minimizeCssOptions,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './tools/postcss.config.js',
              },
            },
          },
          {
            loader: "less-loader",
            options: {
              modifyVars: antThemeVars,
              javascriptEnabled: true
            }
          }
        ]
      },

      // Rules for Style Sheets
      {
        test: reStyle,
        exclude: [
          /[\\/]node_modules[\\/].*antd/,
          resolvePath(SRC_DIR, 'components/antTheme.less'),
        ],
        rules: [
          // Convert CSS into JS module
          {
            issuer: { not: [reStyle] },
            use: 'isomorphic-style-loader',
          },

          // Process external/third-party styles
          {
            exclude: SRC_DIR,
            loader: 'css-loader',
            options: {
              sourceMap: isDebug,
              minimize: isDebug ? false : minimizeCssOptions,
            },
          },

          // Process internal/project styles (from src folder)
          {
            include: SRC_DIR,
            loader: 'css-loader',
            options: {
              // CSS Loader https://github.com/webpack/css-loader
              importLoaders: 1,
              sourceMap: isDebug,
              // CSS Modules https://github.com/css-modules/css-modules
              modules: true,
              localIdentName: isDebug
                ? '[name]-[local]-[hash:base64:5]'
                : '[hash:base64:5]',
              // CSS Nano http://cssnano.co/
              minimize: isDebug ? false : minimizeCssOptions,
            },
          },

          // Apply PostCSS plugins including autoprefixer
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './tools/postcss.config.js',
              },
            },
          },

          // Compile Less to CSS
          // https://github.com/webpack-contrib/less-loader
          // Install dependencies before uncommenting: yarn add --dev less-loader less
          // {
          //   test: /\.less$/,
          //   loader: 'less-loader',
          // },

          // Compile Sass to CSS
          // https://github.com/webpack-contrib/sass-loader
          // Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
          // {
          //   test: /\.(scss|sass)$/,
          //   loader: 'sass-loader',
          // },
        ],
      },

clientConfig.module.rules[0].options.plugins = [
  ...clientConfig.module.rules[0].options.plugins,
  ['import', { libraryName: 'antd', style: true }],
];