在反应中将 sass 样式转换为内联样式对象答案

【问题标题】：Convert sass styles to inline styles object in react在反应中将 sass 样式转换为内联样式对象
【发布时间】：2020-10-21 12:02:30
【问题描述】：

我正在开发一个组件库，它可以作为 React 组件和 css 使用。为了避免冗余代码并避免反应组件依赖于样式表，我想转换 sass 样式，我必须对内联样式做出如下反应：

import buttonStyles from 'Button.scss'

...

<Button styles={buttonstyles.button__primary}>Submit</Button>

buttonstyles.button__primary 是 react 样式类型的对象，例如：

buttonStyles = {
  button__primary: {
    marginLeft: '5px',
    background: 'red'
  },
  button__secondary: {...}
}

这是否可以在 webpack 或任何其他方式中进行配置？

【问题讨论】：

标签： reactjs webpack sass

【解决方案1】：

1。配置 sass 模块

如果您使用 create-react-app 创建项目，您只需在文件名中添加模块前缀。

将 Button.scss 重命名为 Button.module.scss

但如果没有，您应该在 sass-loader 中将 modules 选项设置为 true。

// webpack.config.js

 module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              modules: true
            },
          },
        ],
      },
    ],
  },

2.将您的 jsx 更改为关注

import buttonStyles from 'Button.module.scss'


<Button className={buttonstyles.button__primary}>Submit</Button>

【讨论】：

这只是使用模块，它仍然会通过className引用css，不会生成js对象。