reactjs - 包裹 : using separate SCSS files for each React component, 但带有变量文件

Question

尽管我是 React 和 bundler (以及这两者的组合)的新手，但我正在尝试找到建立高效 Web 开发工作流程的方法。我的目标是让每个 React 组件使用自己的 SCSS 文件，其他组件的样式表无法访问该文件。不过，需要一些全局文件，例如 variables.scss，这就是问题所在。

这是我的文件结构(来自 src 文件夹)目前的样子:

├── assets
├── components
│   ├── App
│   │   ├── index.js
│   │   └── index.scss
│   ├── Taskbar
│   │   ├── index.js
│   │   └── index.scss
│   └── Window
│       ├── index.js
│       └── index.scss
├── index.js
└── sass
    ├── mixins.scss
    └── variables.scss

我使用 Parcel 和 node-sass 来导入这些 SCSS 文件。如您所见，每个组件都有自己的文件夹，其中包含 SCSS 文件。

每个组件都加载其指定的样式表，如下所示:

import React from 'react';
import './index.scss';
import Taskbar from '../Taskbar';

export default class App extends React.Component {
  render() {
    return (
      <div id="app">
        <Taskbar />
      </div>
    )
  }
}

我喜欢保留这种方法，因为只有在导入组件本身时才会使用样式表。

问题

如果你再看一下我的文件结构，sass 文件夹中有两个文件(variables.scss 和 mixins.scss)。我希望所有组件都可以访问该文件夹中的所有文件。

我尝试简单地导入应用程序中的文件，以便可以在所有文件中访问它，如下所示:

import '../../sass/variables.scss';
import '../../sass/mixins.scss';

这些当然会加载，但我无法使用这些文件中声明的变量和函数，例如 Taskbar/index.scss。

所以这会提出我的问题:如何在“ protected ”SCSS 文件中使用这些全局 sass 变量/函数？

Answer 1

欢迎来到 stackoverflow!很棒的第一篇文章。内容非常丰富、清晰、切题。

理想情况下，您共享的 SCSS 将是部分的，并且您将使用 @import 语法而不是 import。

来自Sass guide :

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

工作示例:

<小时/>

一些附加说明...

主观上“更好”的文件夹结构(请参阅下面的注释了解原因):

  └── src
      ├── assets
      ├── components
      |   |
      │   ├── App
      |   |   ├── __tests__
      |   |   |   └── App.test.js
      │   │   ├── index.js
      │   │   └── styles.scss (App.scss)
      |   |
      │   ├── Taskbar
      |   |   ├── __tests__
      |   |   |   └── Taskbar.test.js
      │   │   ├── index.js
      │   │   └── styles.scss (Taskbar.scss)
      |   |
      │   └── Window
      |       ├── __tests__
      |       |   └── Window.test.js
      │       ├── index.js
      │       └── styles.scss (Window.scss)
      |
      ├── styles
      |   ├── _mixins.scss
      |   ├── _variables.scss
      |   └── styles.scss (exports all shared partials)
      |
      └── index.js

• 避免将 index.scss 用于组件级样式表，因为当您开始添加测试时，如果您只编写 import Component from "./index" 不带扩展名。这有 50/50 的机会抛出 export is not a class or function 错误。作为一般经验法则，我将使用与父文件夹相同的名称，或者使用 styles 并将 .scss 扩展名添加到导入中，以区分其唯一性正常的 .js 导入。
• 可选:您可以将部分导入到单个非部分文件中，并将该文件导入到每个组件级样式表中。请参阅我的示例 here 。这可以节省一些时间，无需为每个组件级样式表反复编写多个 @import 语句；但是，当您可能只想要一件东西时，它的缺点是导入所有东西。

而且...如果您感到无聊并且有时间，我会详细说明为什么我喜欢这个 folder structure .