Css 类名不适用于反应组件答案

【问题标题】：Css classname not applied to react componentCss 类名不适用于反应组件
【发布时间】：2018-07-18 10:04:09
【问题描述】：

感谢您的宝贵时间和帮助。我花了几个小时试图弄清楚这一点似乎无法深入了解。

我有这个反应组件：

import styles from './style.scss';

class ButtonComponent extends React.Component { 
  render() {
    return (
      <div className={styles.bunny}>
        hello world
      </div>
    );
  }
}

和scss文件：

.bunny {
  display: block;
  margin-top:50px;
  margin-bottom:55px;
  background-color: blue;
}

当我加载我的 html 时，当我期望它是 <div class="bunny"> 时，该 div 没有类名

当我将类名放在 react 组件中时：

<div className="bunny">

然后我可以在浏览器中看到类名。

我做错了什么？

非常感谢您。

【问题讨论】：

你是如何在 webpack 中使用 css-loader 的？
我正在使用 react-boiler-plate 项目，这是我在 webpack-base.babel.js 中的内容 { // Preprocess our own .css files // This is the place to add your own loaders (e.g. sass/less etc.) // for a list of loaders, see https://webpack.js.org/loaders/#styling test: /\.(s*)css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'sass-loader'], }, 不确定这是否有帮助，你能更具体一点吗？
导入 css 或 sass 文件实际上不会导入任何可以在 js 文件中使用的 javascript 对象，因为 css 文件不会导出任何内容。它只是告诉你的模块捆绑器（webpack）在你的包中包含 css 文件，如果它在某处使用你的组件。只需使用import './style.scss' 导入文件，然后将您的类用作字符串：<div className="bunny">。当然，您的 html 文件也需要链接 css 文件。这更像是告诉 webpack：“嘿，webpack，这个组件使用了这个 sass 文件中的类，所以将它包含在我的包中。”
嗨 Trixn，这是不希望的，因为我不想在 js 文件中硬编码类名。我以前见过这个工作，但我不确定我自己配置错了什么。
@trixn 这根本不是真的。

标签： javascript css reactjs webpack react-boilerplate

【解决方案1】：

首先，您需要保证它的定义是：console.log(styles) 我不确定你是否正确导入 style.scss。

【讨论】：

【解决方案2】：

您需要导入您的 scss，例如... import './styles.scss';

Webpack 将负责捆绑您的样式，以便您可以将 className 作为字符串添加到组件中。

<div className="bunny">Hello World</div>

【讨论】：

【解决方案3】：

解决此问题的方法是将我的 scss 文件的名称从 style.scss 更改为 style.module.scss

【讨论】：

【解决方案4】：

对我来说是因为我使用commonjs的require来加载一个es模块。

【讨论】：