如何在具有 css 个模块的 React 组件中使用 @apply

Question

我在全局 style.css:

:root {
    --font: {
        font-family: "Source Sans Pro", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

... 这在反应组件的 style.css:

.rightnav {
    @apply --font;
    float: right;
    color: white;
}

在组件本身中：

import React from "react"
import cssModules from "react-css-modules"
import style from "./style.css"

render() {
  return (
        <ul>
          <li className={style.rightnav}>Blog</li>
        </ul>
  )
}

我收到错误消息：没有为 font 声明自定义属性集。

Answer 1

您必须将全局样式表导入本地样式表。因为 postcss-apply 在解析本地文件时无法知道该全局文件。因此，只包含自定义属性和自定义属性集声明的部分是个好主意。

您可能想要 postcss-import

@import 'path/to/variables.css';

.rightnav {
  @apply --font;
  float: right;
  color: white;
}

如何在具有 css 个模块的 React 组件中使用 @apply

How to use @apply in a react component with css modules

css

reactjs

react-css-modules