这是我当前的项目目录结构,因为我想不出更好的组织方式来组织每个组件都有自己的 .scss
文件的用例,但是,整个应用程序都是包含全局 variables.scss
文件的 Fed 主题。目前,我正在每个组件的 .scss
文件顶部导入 variables.scss
文件,我想知道这种工作流程的最佳实践是什么。
/ app
/ components
/ Navigation
- Navigation.js
- Navigation.scss
/ styles
- globals.scss
- variables.scss
- main.scss
我的 main.scss 文件基本上是 @import
其目录中的所有 .scss
(例如 variables.scss
、globals.scss
等),但是,我需要以下内容才能访问每个组件内部的变量:
// Navigation.scss
@import '../../styles/variables.scss
.class { ... }
我知道我还可以导入 main.scss
目录中的所有组件 .scss
文件,但这违背了拥有 css 模块并能够导入它们的目的在组件级别的名称间距等。
最佳答案
这是可能的,但我不推荐。
依赖关系
每个组件都有它的依赖项。您必须在每个 Sass (ES6/React.js) 模块中需要多个依赖项。这就是 Webpack 解决依赖关系的方式。
我建议向 Webpack/Sass 配置添加解析路径,并在每个 Sass 模块中导入变量文件。
关于reactjs - 与 webpack 捆绑时如何为每个 .scss 文件提供变量.scss?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37643851/