ReactJS Web应用无法使用本地CSS文件样式，请求排查问题

Hey there, let's work through why your .center CSS class isn't showing up in your AboutCompany component. Let's break this down step by step:

1. Fix the className Syntax (Most Likely Culprit) #

Your current code uses className="style.center"—this is incorrect! The string "style.center" is being treated as a literal class name (meaning React is looking for a CSS class named style.center, which doesn't exist in your file).

Instead, since you're targeting the .center class from your CSS file, you should pass just the class name as a string:

<p className="center">Company</p>

Note: The style={{ ... }} syntax is for inline JS object styles, not for referencing CSS classes from external files.

2. Ensure You've Imported the CSS File #

For your CSS styles to be available to the component, you need to import the aboutcompany.css file at the top of AboutCompany.js:

// Add this line at the top of AboutCompany.js
import './css/aboutcompany.css';

Without this import, Webpack won't bundle the CSS into your app, so the styles will never be applied.

3. Verify Your Webpack Configuration #

Webpack requires loaders to process CSS files. Make sure your webpack.config.js includes rules for style-loader and css-loader to handle CSS imports:

const path = require('path');

module.exports = {
  // ... other webpack config (entry, output, etc.)
  module: {
    rules: [
      // Rule for JS/JSX files (probably already present)
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // Rule for CSS files
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'), // Target only your src directory CSS
        use: ['style-loader', 'css-loader'], // Order matters: style-loader injects styles into DOM, css-loader parses CSS
      },
    ],
  },
};

Don't forget to install these loaders if you haven't already:

npm install style-loader css-loader --save-dev

4. Double-Check Your CSS Class Definition #

Make sure your /src/css/aboutcompany.css has the correct class syntax (no typos!):

/* aboutcompany.css */
.center {
  text-align: center;
  /* Add any other styles you want here */
}

Avoid writing .style.center unless you intend to target a .center class nested inside an element with the .style class—this isn't what you need here.

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