Skip to content

w3ctech-editorial-department/craco-antd-mobile

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MIT License npm version


Craco Ant Design Mobile Plugin

This is a craco plugin that makes it easy to use the Ant Design Mobile UI library with create-react-app version >= 4.

@w3ctech-editorial-department/craco-antd-mobile includes:

Installation

First, follow the beginning section of the Ant Design Mobile create-react-app Documentation to set up your own app with Ant Design Mobile.

Then, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Finally, install @w3ctech-editorial-department/craco-antd-mobile and antd-mobile:

$ yarn add antd-mobile && yarn add -D @w3ctech-editorial-department/craco-antd-mobile

# OR

$ npm i antd-mobile && npm i -D @w3ctech-editorial-department/craco-antd-mobile

@w3ctech-editorial-department/craco-antd-mobile only has a "peer dependency" for antd-mobile >= 2.3.4. So you should add a suitable version of antd-mobile to your own package.json.

Basic Usage

Here is a complete craco.config.js configuration file that sets up Less compilation and babel-plugin-import for create-react-app:

const CracoAntDesignMobilePlugin = require("@w3ctech-editorial-department/craco-antd-mobile");

module.exports = {
  plugins: [{ plugin: CracoAntDesignMobilePlugin }],
};

Customize Ant Design Mobile Theme

You can modify the default Ant Design Mobile theme by changing some Less variables.

@w3ctech-editorial-department/craco-antd-mobile will look for variables in a Less file at ./antd-mobile.customize.less. (You can customize this file path with the customizeThemeLessPath option.)

@brand-primary: #00eaa9;

Here's a list of all the variables that can be modified.

You can also customize these variables directly in your craco.config.js with the customizeTheme option:

const CracoAntDesignMobilePlugin = require("@w3ctech-editorial-department/craco-antd-mobile");

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignMobilePlugin,
      options: {
        customizeTheme: {
          "@brand-primary": "#00eaa9",
        },
      },
    },
  ],
};

customizeTheme is just an alias for the modifyVars option in less-loader.

If you use multiple options to customize the theme variables, they are merged together in the following order:

  • options.customizeThemeLessPath (default: ./antd-mobile.customize.less)
  • options.customVarsJSONPath (default: ./antd-mobile.customize.json)
  • options.customizeTheme
  • options.lessLoaderOptions.modifyVars

For more information, see Ant Design Mobile's "Customize Theme" documentation.

Options

You can pass an options object to configure the loaders and plugins. You can also pass a modifyLessRule callback to have full control over the Less webpack rule. See the craco-less documentation for more information about these options:

  • options.modifyLessRule
  • options.cssLoaderOptions
  • options.lessLoaderOptions
  • options.styleLoaderOptions
  • options.postcssLoaderOptions
  • options.miniCssExtractPluginOptions

See the babel-plugin-import documentation for more information about this option:

  • options.babelPluginImportOptions

Example:

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            noIeCompat: true,
            strictMath: true,
            modifyVars: { "@brand-primary": "#00eaa9" },
          },
        },
        cssLoaderOptions: {
          modules: true,
          localIdentName: "[local]_[hash:base64:5]",
        },
        babelPluginImportOptions: {
          libraryDirectory: "es",
        },
      },
    },
  ],
};

License

MIT

About

A craco plugin to use Ant Design Mobile with create-react-app

Resources

License

Stars

Watchers

Forks

Packages

No packages published