Reactjs 将sass样式转换为react中的内联样式对象

我正在开发一个组件库，它将作为react组件和css提供。为了避免冗余代码并避免react组件依赖于样式表，我想转换sass样式，我必须对内联样式进行如下反应：

import buttonStyles from 'Button.scss'

...

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

这是否可以通过网页包或任何其他方式进行配置？

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

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

但如果不是，您应该在sass加载程序中将modules选项设置为true

//webpack.config.js
模块：{
规则：[
{
测试：/\（sass | scss）$/，
使用：[
{
加载器：“sass加载器”，
选项：{
模块：正确
},
},
],
},
],
},

2.将jsx更改为以下内容

从“Button.module.scss”导入按钮样式
提交

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

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