我正在研究一个遵循这种结构的 React 项目
src |
components |
Footer |
index.jsx
styles.scss
Header |
index.jsx
styles.scss
scss |
helpers.scss
variables.scss
...
main.scss
在我的变量文件中，我使用了css自定义变量，因此，所有这些:root都在我的位置，我可以在我的组件样式中访问它们。
当我想创建深色时，我想使用 SCSS 函数darken，但它不评估它们并抛出一个错误，说这var(--blue)不是有效颜色。
作为解决方案，我决定将所有变量移动到 SCSS 变量中，但是在构建项目时，它会引发另一个错误，指出 a$blue未定义。
我可以使用的唯一解决方案是将变量文件包含在所有样式文件中，但是，我不知道是否有更好的解决方案适用于我正在使用的结构。
从react 17
要将您的 scss 变量访问到 react 组件中，您需要执行类似的操作
node-sass作为依赖项或开发依赖项安装变量.module.scss
$color: skyblue;
$primaryColor: red;
:export {
color: $color;
primary-color: $primaryColor;
}
应用程序.js
import variables from '<YOUR_PATH>/variables.module.scss';
const App = () => {
console.log(variables);
}
如果你不想使用，styled-component
那么你可以点击这个链接。
https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
我使用类似的结构来组织我的 .scss 文件。我喜欢将样式与组件放在同一个文件夹中。但是，我将所有 scss 文件导入到我的main.scss文件中。这有助于避免 DOM 中的样式冲突。
主文件
import "./scss/helpers.scss"
import "./variables.scss"
import "./Footer/style.scss"
import "./Header/styles.scss"
确保使用下划线命名您的文件，以便所有文件在编译时合并。请注意，您不需要在导入中命名下划线。
_helpers.scss
_variable.scss
_style.scss
使用此方法，您只需将样式导入您的应用程序一次。 index.jsx
我可以建议您通过多种不同的方式来解决这个问题。
1- 复制这些变量的值。将它们添加到您的 variables.scss 和其他文件中的常量，也许是 config.js 或 constants.js 这样您就可以从您的react组件中引用这些值，不利的一面是，您将拥有如果您必须修改值，请记住在两个地方更改它们。
2- 考虑使用styled-components。使用样式化组件，您可以在组件中定义样式，使用样式中的变量或props。
3- 使用某种机制在单个文件中或作为环境变量定义这些变量，并设置您的构建过程以能够将这些值导入 js 和 scss 文件。