使用样式化的组件创建像全局变量、函数、mixin 这样的 SASS

Posted 2023-03-15

【中文标题】使用样式化的组件创建像全局变量、函数、mixin 这样的 SASS

【英文标题】：Create SASS like global variables, functions, mixins with styled components

【发布时间】：2021-10-09 02:47:30

【问题描述】：

我正在开始一个使用样式组件的新项目。我已经习惯了 SASS 中的架构，我有类似的东西：

styles
  mixins
    custom-mixin.scss
    ...
    all-mixins.scss
  variables
    colors.scss
    breakpoints.scss
    ...
    all-variables.scss
  mixins-and-variables.scss

通常，我会在我的项目头中导入mixins-and-variables.scss。我希望使用样式组件将其更改为我的 JS 文件的模式：

styles
src
  head.js <<< imports mixins-and-variables.scss

这将使我在其下导入的任何样式表都可以全局访问我的 mixins 和变量，例如：

styles
src
  head.js
  components
    section.js
    section.module.scss <<< can access global variables sourced in head.js

对于样式化的组件，我很难使用全局模式，因为每个组件都局限于自身。我想避免在每个样式组件中导入我的所有实用程序文件。有没有办法以样式化组件的方式复制上述模式？

【参考方案1】：

您可以使用/混合global styles、themes、tagged template literals（混合/变量）和extend styles 来实现您的目标。