时间戳

首页 > 解决方案 > 在反应中将 sass 样式转换为内联样式对象

reactjs - 在反应中将 sass 样式转换为内联样式对象

问题描述

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

import buttonStyles from 'Button.scss'

...

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

反应样式类型的对象在哪里buttonstyles.button__primary，例如：

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

这可以在 webpack 或任何其他方式中配置吗？

标签： reactjswebpacksass

解决方案

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>

推荐阅读