Parcel：为每个 React 组件使用单独的 SCSS 文件，但使用变量文件

Question

尽管我对 React 和捆绑器（以及这两者的组合）很陌生，但我正在尝试找到建立高效 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

。

因此我的问题是：如何在“受保护”的 SCSS 文件中使用这些全局 sass 变量/函数？

Answer 1

理想情况下，您共享的

SCSS

将是部分内容，您将使用

@import

语法而不是

import

。

来自 Sass 指南：

您可以创建包含 CSS 小片段的部分 Sass 文件 您可以将其包含在其他 Sass 文件中。这是一个很好的方法 模块化您的 CSS 并帮助使事情更易于维护。 A partial 只是一个以下划线开头命名的 Sass 文件。你 可能会将其命名为 _partial.scss 之类的名称。下划线让 Sass 知道该文件只是一个部分文件，并且不应该 生成为 CSS 文件。 Sass 部分与 @import 一起使用 指令。

工作示例：

---

一些补充说明...

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

  └── 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"

  ，您会让 Webpack 混淆您想要哪个导入。这有 50/50 的几率抛出

  export is not a class or function

  错误。作为一般经验法则，我将使用与父文件夹相同的名称，或者使用

  styles

  并向导入添加

  .scss

  扩展名，以区分其与普通

  .js

  导入的独特性。
• 可选：您可以将部分导入到单个非部分文件中，并将该文件导入到每个组件级样式表中。请参阅我的示例此处。这样可以节省一些时间，无需为每个组件级样式表反复编写多个

  @import

  语句；但是，当您可能只想要一件东西时，它的缺点是导入所有东西。

如果您有时间，我会详细介绍为什么我喜欢这个文件夹结构。