多个 scss 文件引用一个主样式文件

Posted 2023-03-07

【中文标题】多个 scss 文件引用一个主样式文件

【英文标题】：Multiple scss Files Referencing One Main Style File

【发布时间】：2019-12-15 07:30:19

【问题描述】：

我正在开发一个 React 应用程序并拥有三个 scss 文件，一个是包含主题变量颜色的主文件，而另外两个是其组件文件夹的一部分。

假设我将 main 导入到 contacForm styles.css 并应用变量颜色。事情按预期工作。但是，只要我将 main 导入 keepInTouchForm styles.scss，它就会从 contactForm

中删除样式

问题是为什么会发生这种情况以及保留一个包含所有变量的 main.scss 文件并跨多个 scss 文件引用的正确方法是什么？

这是我的文件夹结构：

- components
-- contactForm
--- index.js
--- styles.scss

-- keepInTouchForm
--- index.js
--- styles.scss

- scss
-- main.scss

main.scss 代码如下：

$theme-colors: (
  'primary': #00a677,
  'secondary': #dde1e7,
);

contactForm文件夹内的styles.scss代码：

@import '../../scss/main.scss';

.form-control 
  border: 1px solid theme-color('secondary');

keepInTouchForm文件夹内的styles.scss代码：

@import '../../scss/main.scss'; //breaks the above code

【问题讨论】：

theme-color('secondary'); 根本不适合我。

【参考方案1】：

map-get 语法似乎对我很有效。

map-get($theme-colors, primary);