Javascript 将样式css导入react js应用程序

在react basic应用程序上导入.css样式表时遇到问题，我有以下组件：

AvatarHeader.js：

import styles from './AvatarHeader.css';

export default function AvatarHeader({ style, children }) {
  return (
    <div>
      <img style={styles.image} src={Background} alt="background">
        { children }
      </img>

AvatarHeader.js和AvatarHeader.css位于同一文件夹中

package.json：

  {
    "name": "UtWeb",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
      "css-loader": "^0.25.0",
      "react-scripts": "0.9.0",
      "webpack": "^2.2.1",
      "webpack-dev-server": "^1.9.0"
    },
    "dependencies": {
      "react": "^15.4.2",
      "react-dom": "^15.4.2",
      "react-redux": "^4.3.0",
      "react-router": "^2.0.0",
      "redux": "^3.2.1",
      "react-router-redux": "^4.0.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }

样式不会应用到组件上，但如果我重写AvatarHeader.js，它会起作用：

  import styles from './AvatarHeader.css';

  const image = {
    width: 400
  }

  export default function AvatarHeader({ style, children }) {
    return (
      <div>
        <img style={image} src={Background} alt="background">
          { children }
        </img>

从“/AvatarHeader.css”导入样式；
常量图像={
宽度：400
}
导出默认函数AvatarHeader（{style，children}）{
返回(
{儿童}

我不知道如何使用第一种导入css文件的方法修复此错误。

import./AvatarHeader.css'`
import './AvatarHeader.css';`
<img className='image' />` 

` 

---

是正确的语法

如果有人再次遇到此问题，样式表需要遵循操作的原始语法才能工作

因此，一旦文件重命名为

AvatarHeader.module.css

，以下代码应该可以工作：

从“/AvatarHeader.module.css”导入样式；
导出默认函数AvatarHeader（{style，children}）{
返回(
{儿童}

您需要将CSS文件名从

AvatarHeader.CSS

更改为

AvatarHeader.module.CSS

。 那么导入语句应该是：

从“/AvatarHeader.module.css”导入样式

。现在应该可以工作了。

---

您不需要导入CSS文件并将其作为对象使用。您只需要导入没有名称的文件，只是为了产生副作用，然后将.image类赋予img。您可以尝试使用而不是

CSS加载器

，因为它将为您提供一个对象，而不是全局加载CSS（这就是

CSS加载器

所做的）.Perfect！这是可行的，但另一个问题是，如果我有另一个带有“image”类的导入css文件，该怎么办。我如何定义该类的使用位置？如果您使用的是webpack和css loader，您可以定义范围。此处的更多信息：该全局导入css？还是仅针对组件？

import './AvatarHeader.css';`
<img className='image' />`