所有变量/混入等的Reactjs全局Scss文件

问题描述

我有一个包含使用scss的多个组件的项目。

我想创建一个文件，该文件存储我的所有变量和mixins全局，然后可以由我项目中的任何其他scss文件使用。不必手动将文件导入到我制作的每个scss文件中怎么办？

我尝试将index.css制作为一个scss文件，并将所有变量和mixins移到那里。但是什么都没有真正改变。我目前在组件中使用scss模块。也许有更好的方法吗？

我的文件夹结构

const {powerMonitor} = require('electron'); 
const idle = powerMonitor.getSystemIdleTime() // it returns in seconds when I am writing this
console.log('Current System Idle Time - ',idle); 

解决方法

您需要通过scss“连接”所有@import文件，如果需要最少的工作，请创建一个根目录并@import每个文件一次，同时确保变量和mixins会先于其他导入。

例如：

// utilities
@import 'utilities/variables','utilities/mixins';

//components
@import 'components/buttons','components/modals';