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

【问题标题】：Import styles css into a react js app将样式 css 导入 react js 应用程序
【发布时间】：2017-07-21 11:07:54
【问题描述】：

我在 React 基本应用程序上导入 .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>

头像头.css：

.image {
   width: 400
}

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>

我不明白如何修复此错误以使用第一种方式导入 css 文件。

【问题讨论】：

您不会导入 CSS 文件并将其用作对象。您只需要导入没有名称的文件只是为了副作用，然后将 .image 类提供给 img。
你可以尝试使用css-object-loader而不是css-loader，因为它会给你一个对象而不是全局加载CSS（这是css-loader所做的）。

标签： javascript css reactjs

【解决方案1】：

您需要将 CSS 文件名从 AvatarHeader.css 更改为 AvatoarHeader.module.css。那么导入语句应该是： import styles from './AvatarHeader.module.css'。它现在应该可以工作了。 see docs

【讨论】：

【解决方案2】：

如果有人再次遇到此问题，样式表需要遵循module naming convention 才能使 OP 的原始语法正常工作。

因此，一旦文件重命名为 AvatarHeader.module.css，以下 React 代码应该可以工作：

import styles from './AvatarHeader.module.css';

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

【讨论】：

【解决方案3】：

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

是正确的语法

【讨论】：

完美！这可行，但另一个问题是，如果我有另一个导入的带有“图像”类的 css 文件会通过什么。如何定义在哪里使用该类？
如果你使用 webpack 和 css-loader，你可以定义范围。更多信息在这里：github.com/webpack-contrib/css-loader#css-scope
这个全局导入css？还是只针对组件？