create脚手架使用antd(开启less,css module,定制主题)

create-react-app

使用 create-react-app 脚手架开发时, 命令 yarn run eject 暴露配置。

webpack 配置

在暴露出的 webpack.config.dev.js 和 webpack.config.prod.js 中进行配置修改即可。

antd 按需加载

//安装依赖
npm install babel-plugin-import --save-dev

//修改配置
// Process JS with Babel.
{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    plugins: [ //增加此配置，注意style:true 动态加载；style:css加载生成后的css文件
      ['import', { libraryName: 'antd', style: true }]
    ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
  },
},

开启 css modules && less

//安装依赖
npm install less-loader --save

//此处指定版本是因为less高版本与antd冲突
npm install less@2.7.3 --save

//处理规则从下向上
{
  test: /\.(css|less)$/,  //匹配css或less
  exclude: [/node_modules/], //排除node_modules文件夹，避免开启css-module时 antd 冲突
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: { //开启，且指定localIdentName,类名形式
        importLoaders: 1,
        modules: true,
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    { //开启less-loader
      loader: require.resolve('less-loader'),
    }
  ],
},

//处理规则从下向上
{
  test: /\.(css|less)$/,
  include: [/node_modules/], //针对node_modules, antd
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    { //less处理
      loader: require.resolve('less-loader'),
      options: {
        modifyVars: { //修改主题
          '@primary-color': '#1DA57A'
        },
      },
    }
  ],
},

补充~Javascript Decorators

1	npm install babel-plugin-transform-decorators-legacy --save-dev

方式一

package.json 中配置

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
},

方式二

webpack 中配置

//修改webpack.config.dev.js配置文件
//babel-loader plugins中加入”transform-decorators-legacy”
{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    plugins: [
      "transform-decorators-legacy",
      ['import', { libraryName: 'antd', style: 'css' }]
    ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,

  },
},