React项目中Babel无法编译CSS文件且无法识别.classname的问题求助

Hey there, let's work through this CSS compilation problem you're hitting with your React project. That SyntaxError: unknown: Unexpected token on your .titleBar selector makes total sense—Babel is built to handle JavaScript/JSX, not raw CSS. Your current setup has CSS Modules-related plugins, but they aren't hooked up correctly to process CSS files during your build pipeline. Let's fix this step by step:

1. Correct Your Babel Configuration #

First, make sure your Babel setup is properly configured to work with CSS Modules. Create or update a .babelrc file in your project root (or add a babel field directly in your package.json) with these settings:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    ["react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".css": {
          "syntax": "postcss"
        }
      }
    }]
  ]
}

This plugin tells React to recognize CSS Modules and automatically convert your class names to unique scoped identifiers, which avoids naming collisions.

2. Configure Browserify to Process CSS Files #

Since you're using Browserify to bundle your code, you need to add transforms to handle both JSX/Babel and CSS. Right now, your run script only runs the server—you need a build script that uses the right transforms:

Step 2.1: Install Missing Dependency #

First, install babelify (it lets Browserify use Babel to transpile JSX/ES6):

npm install --save-dev babelify

Step 2.2: Update Your npm Scripts #

Modify your package.json scripts to include a build command that processes CSS:

"scripts": {
  "build": "browserify ./src/index.js -t css-modulesify -t babelify -o ./dist/bundle.js",
  "run": "npm run build && node ."
}

The css-modulesify transform will take your CSS files, process them into CSS Modules, and make them importable in your React components.

3. Use CSS Modules Correctly in Your Components #

Make sure you're importing and using your CSS classes the right way—you can't just use plain string class names anymore with CSS Modules. Here's how to do it:

// Import the styles object from your CSS file
import styles from './your-styles.css';

function YourComponent() {
  // Use the scoped class name from the styles object
  return <div className={styles.titleBar}>Your Content</div>;
}

This ensures you're referencing the unique, transformed class name that CSS Modules generates.

4. Verify Dependency Compatibility #

Double-check that your plugin versions play nice together. Your current babel-plugin-react-css-modules@5.2.6 should be compatible with @babel/core@7.16.7, but if you still run into issues, try updating to the latest compatible version of the CSS Modules plugin to match your Babel version.

After making these changes, run npm run build to compile your code, then start your server with npm run run—the CSS syntax error should be gone, and your class names should be recognized correctly.

内容的提问来源于stack exchange，提问作者sony rahul