Reactjs+CRA+TS+Craco+Less环境下CSS Modules失效问题求助（无需eject项目）

Let’s fix your issues step by step. The main problems in your setup are duplicate plugin entries, a typo in Less configuration, and missing TypeScript type definitions for CSS Modules.

1. Fix Your craco.config.js #

You’ve added CracoLessPlugin twice, which causes configuration conflicts. There’s also a typo in the relativeUrls option. Update your config to this:

const CracoLessPlugin = require('craco-less')
const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        cssLoaderOptions: {
          sourceMap: true,
          modules: {
            mode: 'local',
            localIdentName: '[local]___[hash:base64:5]',
          },
        },
        lessLoaderOptions: {
          lessOptions: {
            relativeUrls: false, // Fixed typo here
            sourceMap: true,
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: './tsconfig.path.json',
      },
    },
  ],
}

Key changes:

• Removed the duplicate CracoLessPlugin entry (this was overriding your CSS Modules setup)
• Fixed the typo orelativenUrls → relativeUrls (ensures Less resolves paths correctly)
• Explicitly set modules.mode: 'local' to enforce scoped CSS Modules for .module.less files

2. Correct TypeScript Type Definitions for CSS Modules #

Your current declaration doesn’t tell TypeScript what the imported classes object looks like. Update react-app-env.d.ts to:

/* eslint-disable spaced-comment */
/// <reference types="react-scripts" />
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.svg'
declare module '*.mp4'
declare module '*.mov'

declare module '*.module.less' {
  const classes: Record<string, string>;
  export default classes;
}

This tells TypeScript that any .module.less file exports an object where keys are your original class names, and values are the scoped CSS class strings generated by CSS Modules.

3. Restart Your Dev Server #

Craco doesn’t always pick up config changes on the fly. Stop your current dev server and restart it to apply the new configuration.

After these steps, your CSS Modules should work correctly:

• Less variables like @accent-color will be resolved properly
• Class names will be scoped (check browser dev tools to see generated names like navpanel__socials___abc12)
• Nested selectors in your Less file will apply as expected

内容的提问来源于stack exchange，提问作者Paul Alexeev