How to use customize-cra - 10 common examples

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const darkTheme = require('@ant-design/dark-theme')

module.exports = function override(config, env) {
    // do stuff with the webpack config...
    return config;
};


console.log('config override running...')

module.exports = override(

    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    // todo: to really get the dark theme working correctly we'll need
    // to fix a lot of stuff related to styling...
    // move inline styles out, invert stuff like #fff, ...
    // addLessLoader({
    //     javascriptEnabled: true,
    //     modifyVars: darkTheme.default
    // }),
);

// module.exports = function override(config, env) {
//     // do stuff with the webpack config...
//     return config;
// }
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#1890FF',
    },
  }),
);

const { override, fixBabelImports, addBundleVisualizer, addLessLoader, disableEsLint, babelInclude, addWebpackResolve } = require('customize-cra');
const path = require('path');
module.exports = override(
    // 模块 解析 路径
    // addWebpackResolve({
    //     modules: [
    //         path.resolve(path.dirname(path.dirname(process.cwd())), 'node_modules'),
    //         path.resolve(process.cwd(), 'node_modules'),
    //         path.resolve(process.cwd(), 'src'),
    //     ]
    // }),
    // 添加 需要 编译的目录
    babelInclude([
        // 当前项目
        path.resolve(process.cwd(), 'src'),
        // public 目录
        path.resolve(path.dirname(process.cwd()), 'public', 'src')
    ]),
    // 按需加载

const CompressionPlugin = require('compression-webpack-plugin')
const path = require('path')

// const AntDesignThemePlugin = require('antd-theme-webpack-plugin')

const {
  override,
  addDecoratorsLegacy,
  addBundleVisualizer,
  addBabelPlugin,
  addWebpackAlias,
  addWebpackPlugin,
  disableEsLint
} = require('customize-cra')

module.exports = override(
  addDecoratorsLegacy(),
  disableEsLint(),
  // eslint-disable-next-line
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
  /*
  // auto-imports for antd; currently we're opting for more manual control in src/lib/antd.js
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      // '@primary-color': '#d23d67'
    }

const {override, fixBabelImports, addLessLoader} = require('customize-cra');

module.exports = override(
  fixBabelImports('antd', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      // Fetch icons locally instead of Alibaba CDN (https://ant.design/docs/react/customize-theme).
      // Latest resource can be found here: https://ant.design/docs/spec/download.
      '@icon-url': '"/iconfont"',
      // Override Ant's LESS constants (https://ant.design/docs/react/use-with-create-react-app).
      '@primary-color': '#00a2ae',
    },
  }),
);

// navigateFallback: paths.servedPath + '/index.html',
      // navigateFallbackBlacklist: [
      //   // Exclude URLs starting with /_, as they're likely an API call
      //   new RegExp('^/_'),
      //   // Exclude URLs containing a dot, as they're likely a resource in
      //   // public/ and not a SPA route
      //   new RegExp('/[^/]+\\.[^/]+$'),
      // ],
    });
    config.plugins.push(workboxWebpackPlugin);
  }
  return config;
};

module.exports = {
  webpack: override(
    supportMultiPage,
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
    }),
    fixBabelImports('ant-design-pro', {
      libraryName: 'ant-design-pro',
      libraryDirectory: 'lib',
      style: true,
      camel2DashComponentName: false,
    }),
    addLessLoader({
      javascriptEnabled: true,
      localIdentName: '[local]--[hash:base64:5]',
      // modifyVars: { '@primary-color': '#1DA57A' },

/* eslint-disable */
/* config-overrides.js */
const {
  useBabelRc, override, fixBabelImports, addLessLoader,
} = require('customize-cra');
const path = require('path');
module.exports = override(
  useBabelRc(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      'hack': `true; @import "${ path.resolve(__dirname, 'src/styles/less/theme.less')}";`,// Override with less file
    },
  }),
);

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

addWebpackPlugin
} = require("customize-cra");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");

const options = {
  stylesDir: path.join(__dirname, "./src/styles"),
  antDir: path.join(__dirname, "./node_modules/antd"),
  varFile: path.join(__dirname, "./src/styles/vars.less"),
  mainLessFile: path.join(__dirname, "./src/styles/main.less"),
  themeVariables: ["@primary-color"],
  indexFileName: "index.html",
  generateOnce: false // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  }),
  addLessLoader({
    modifyVars: {},
    javascriptEnabled: true
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options))
);

const setWebpackTargetPlugin = config => {
  config.target = 'electron-renderer'
  return config
}

const setPublicPathPlugin = config => {
  if (config.output) {
    config.output.publicPath = ''
  } else {
    config.output = { publicPath: '' }
  }
  return config
}

const webpackMaker = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#ffa81e', // 全局主色
      '@link-color': '#1890ff', // 链接色
      '@success-color': '#52c41a', // 成功色
      '@warning-color': '#faad14', // 警告色
      '@error-color': '#f5222d', // 错误色
      '@font-size-base': '14px', // 主字号
      '@heading-color': 'rgba(0, 0, 0, .85)', // 标题色
      '@text-color': 'rgba(0, 0, 0, .65)', // 主文本色
      '@text-color-secondary': 'rgba(0, 0, 0, .45)', // 次文本色