How to use the customize-cra.addLessLoader function in customize-cra

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',
    },
  }),
);

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" }
  })
);

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' },
    }),
    // addBundleVisualizer(),
  ),
  devServer: configFunction => {
    return (proxy, allowedHost) => {
      const config = configFunction(proxy, allowedHost);
      config.historyApiFallback.rewrites = [{ from: /^\/login\.html/, to: '/build/login.html' }];
      return config;
    };
  },
};

'@primecms/field-geopoint',
    '@primecms/field-group',
    '@primecms/field-number',
    '@primecms/field-select',
    '@primecms/field-slice',
    '@primecms/field-string',
  ],
});

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#318E9F',
      '@link-color': '#318E9F',
      '@font-family':
        '"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
      '@code-family':
        '"Source Code Pro", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;',
      '@font-size-base': '16px',
      '@layout-header-background': '#1F3E44',
    },
  }),
  rewireGqlTag,
  config => {
    const babelLoader = getBabelLoader(config);

* Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

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

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

addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    components: path.resolve(__dirname, 'src/components'),
    assets: path.resolve(__dirname, 'src/assets')
  }),
  adjustWorkbox(wb =>
    Object.assign(wb, {
      skipWaiting: true,
      exclude: (wb.exclude || []).concat('index.html')
    })
  ),
  fixBabelImports('import', {
    libraryName: 'antd',
    style: true
  }),
  addLessLoader({
    localIdentName: '[local]--[hash:base64:8]',
    modifyVars: {}
  }),
);

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
}),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { 
            '@layout-body-background': '#0e1314',
            '@background-color-base': '#0e1314',
            '@body-background': '#0e1314',
            '@layout-sider-background': '#171F22',
            '@component-background': '#171F22',
            '@layout-header-background': '#171F22',
            '@menu-dark-submenu-bg': '#171F22',
            '@input-bg': '#171717',
            '@btn-default-bg': '#171717',
            '@border-color-base': 'rgba(0, 0, 0, 0.3)',
            '@border-color-split': 'rgba(0, 0, 0, 0.3)',
            '@heading-color': '#E3E3E3',
            '@text-color': 'rgba(255, 255, 255, 0.8)',
            '@text-color-secondary': 'fade(#fff, 65%)',

'@components': path.resolve(__dirname, 'src/components'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@layouts': path.resolve(__dirname, 'src/layouts'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@store': path.resolve(__dirname, 'src/store'),
      '@containers': path.resolve(__dirname, 'src/containers'),
      '@services': path.resolve(__dirname, 'src/services')
    }),
    useBabelRc(),
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      libraryDirectory: 'lib',
      style: true,
      legacy: true
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: theme
    }),
    addDecoratorsLegacy({
      legacy: true
    })
  )
}

}
        }
      }
    }
  }
  return config
}

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  ignoreMiniCssExtractOrder(),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#3351ff',
      '@body-background': '#fff',
      '@tooltip-bg': 'rgba(0, 0, 0, 0.9)',
      '@tooltip-max-width': '500px',
    },
    globalVars: {
      '@padding-page': '48px',
      '@gray-1': '#fff',
      '@gray-2': '#fafafa',
      '@gray-3': '#f5f5f5',
      '@gray-4': '#f0f0f0',
      '@gray-5': '#d9d9d9',
      '@gray-6': '#bfbfbf',
      '@gray-7': '#8c8c8c',