与 webpack 捆绑时如何为每个 .scss 文件提供 variables.scss? [英] How can I provide variables.scss to each .scss file when bundling with webpack?

问题描述

这是我当前的项目目录结构，因为我想不出更好的方法来组织每个组件都有自己的 .scss 文件的用例，但是，整个应用程序都是包含全局 variables.scss 文件的馈送主题.目前，我正在每个组件的 .scss 文件顶部导入 variables.scss 文件，我想知道这种工作流程的最佳实践是什么.

This is my current project directory structure, as I couldn't think of a better way of organizing for the use case that every component has it's own .scss file, however, the entire app are fed themes which include a global variables.scss file. Currently, I'm importing the variables.scss file at the top of every component's .scss file and I'm wondering what the best practices are for this sort of workflow.

/ app
  / components
     / Navigation
       - Navigation.js
       - Navigation.scss
/ styles
  - globals.scss
  - variables.scss
  - main.scss

我的 main.scss 文件基本上 @import 所有 .scss 在它的目录中(例如 variables.scss, globals.scss 等)，但是，我需要以下内容才能访问每个组件内的变量:

My main.scss file basically @import all .scss in its directory (e.g. variables.scss, globals.scss, etc.), however, I need to the following to have access to variables inside of each component:

 // Navigation.scss
 @import '../../styles/variables.scss

 .class { ... }

我知道我也可以导入 main.scss 目录中的所有组件 .scss 文件，但这违背了拥有 css 模块并能够导入它们的目的在组件级别用于名称间距等

I understand I could also import all component .scss files inside of the main.scss directory but that defeats the purpose of having css modules and being able to import them at component level for name spacing, etc.

推荐答案

有可能，但我不推荐.

依赖关系

每个组件都有它的依赖项.您必须在每个 Sass (ES6/React.js) 模块中都需要几个依赖项.这就是 Webpack 解决依赖的方式.

Every component has it's dependencies. You have to require several dependencies in each Sass (ES6/React.js) module. That's how Webpack resolves dependencies.

我建议添加一个解析路径到 Webpack/Sass 配置并在每个 Sass 模块中导入变量文件.

I recommend add an resolve path to Webpack / Sass config and import the variables file in each Sass module.

这篇关于与 webpack 捆绑时如何为每个 .scss 文件提供 variables.scss?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！