如何在JS中引用CSS预处理器的变量？

Question

css modules可以在js中引入css里定义好的变量，看了下Stylus的文档，似乎没有这种方法，其他CSS流行预处理器有没有这种类似的方法呢？

Answer 1

用less或sass写样式，然后先用less-loader或sass-loader加载，这些loader会为你处理less或sass文件的呢，再用css-loader加载

补充：这个跟css预处理器是没有关系的，主要是webpack提供呢loader为你处理这些文件

Answer 2

这种情况以前遇到过，但是没有想到什么好的办法。我之前的做法是，把CSS变量提取出来，放到_variables.js中，如果你用过sass，应该知道通用变量一般放在_variables.scss中，比如：

$header-height: 50px;
$header-text-align: center;

把它改为js的方式:

module.exports = {
    header: {
        height: 50, 
        textAlign: 'center'
    }
}

然后在React的组件中，使用style属性来引用变量：

import inlineStyles from '../scss/_variables'
import styles from '../scss/header.scss'

<Header style={inlineStyles.header} className={styles.header}>
    // content
</Header>

这是我暂时的做法，仅供参考。