SCSS 效果未在 React jsx 组件中显示答案

【问题标题】：SCSS effects not showing in React jsx componentSCSS 效果未在 React jsx 组件中显示
【发布时间】：2018-01-28 02:18:39
【问题描述】：

我正在尝试设置 React 组件的样式，但看不到效果。没有任何错误，只是没有样式。

ButtonFilled.jsx（我的 React 组件）

import React from 'react';
import css from './button.scss';

class ButtonFilled extends React.Component {
   render() {

      return (

          <div>
         <button className = {css.buttonFilled}>
            Learn More
         </button>
          </div>
      );
   }
}
   export default ButtonFilled;

button.scss（我的样式表）

@import "base.scss";
.buttonFilled{
     font-size: 24;
     color: '#6D0839';
     font-weight: "bold";
     background-color: '#FFFFFF';
     padding-top: 17;
     padding-bottom: 22;
     padding-left: 15;
     padding-right: 15;
     width: 203;
     border-radius: 5;
     border-color: '#FFFFFF';
  }

为什么会这样？我没有正确指定类名吗？

【问题讨论】：

标签： javascript css reactjs sass

【解决方案1】：

尝试以这种方式导入。

import React from 'react';
import './button.scss';

class ButtonFilled extends React.Component {
   render() {
      return (
          <div>
            <button className = "buttonFilled">
              Learn More
            </button>
          </div>
      );
   }
}

export default ButtonFilled;

【讨论】：

错误必须来自 sass 是如何捆绑在你的 webpack 配置中的
请检查您的 webpack 配置。您可能没有添加 scss-loader。

【解决方案2】：

button.scss 位于何处？如果它与 ButtonFilled.jsx 是同一个文件夹，我看不出有什么问题。否则将路径更改为正确的路径，请注意 .在 './button.scss' 中表示当前文件夹。使用 css 的其他方法只是导入 css，如 import'./button.scss';（确保其路径正确）。在你的 jsx className="buttonFilled"

【讨论】：