如何用CSS模塊組件反應

Question

我在一個全球性的style.css得到這個使用@apply：

: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; 
}