如何修复React项目中CSS文件默认/命名导入弃用警告？

Hey there! Let's get that annoying CSS import warning sorted out for your React project. That message is telling you the old way of importing CSS files (either as a default export or named imports) is no longer supported in your bundler (like Vite, modern Webpack, or similar tools), and you need to use the ?inline query instead. Here's exactly how to implement it:

First, recap the deprecated syntax #

You were probably importing CSS like this before, which is now flagged:

// ❌ Deprecated default import (common for CSS Modules)
import styles from './MyComponent.module.css';

// ❌ Deprecated named import
import { buttonStyle } from './global.css';

How to use ?inline correctly #

The ?inline query tells your bundler to export the entire CSS file as a raw string, instead of trying to parse it into a module of class names. You can then inject this string into your React component dynamically.

For Vite-based React projects (most common these days) #

Vite supports the ?inline query out of the box. Here's how to adjust your imports:

1. For CSS Modules:

   // ✅ Import CSS Module as raw text with ?inline
   import moduleStylesText from './MyComponent.module.css?inline';
   

   Then inject it into your component using useEffect to add/clean up the style tag:

   import { useEffect } from 'react';
   import moduleStylesText from './MyComponent.module.css?inline';
   
   function MyComponent() {
     useEffect(() => {
       // Create a style element
       const styleElement = document.createElement('style');
       styleElement.textContent = moduleStylesText;
       // Add it to the document head
       document.head.appendChild(styleElement);
       // Clean up when component unmounts
       return () => document.head.removeChild(styleElement);
     }, []);
   
     return <div className="my-component-class">Hello World</div>;
   }
   

2. For global CSS:
   Same approach—just append ?inline to your import path and inject the string:

   import { useEffect } from 'react';
   import globalStylesText from './global.css?inline';
   
   function App() {
     useEffect(() => {
       const styleElement = document.createElement('style');
       styleElement.textContent = globalStylesText;
       document.head.appendChild(styleElement);
       return () => document.head.removeChild(styleElement);
     }, []);
   
     return <MyComponent />;
   }
   

For Webpack-based React projects #

Webpack also supports the ?inline query, but you'll need to make sure you have css-loader installed. Here's how to use it:

1. Import the CSS as a raw string:

   import stylesText from './styles.css?inline';
   

2. Use the same useEffect pattern from the Vite example to inject the styles into the DOM.

If you want a global configuration instead of adding ?inline to every import, update your webpack.config.js to treat all CSS files as raw strings:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['css-loader'],
        type: 'asset/source', // Exports CSS as a raw string
      },
    ],
  },
};

Why this change? #

Bundlers are moving away from non-standard CSS module imports (like importing class names as objects) because they don't align with ES module standards. The ?inline approach is more explicit: it makes it clear you're importing the CSS as a raw text string, which is a standard module behavior.

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