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

Posted 2023-02-23

【中文标题】Parcel：为每个 React 组件使用单独的 SCSS 文件，但使用变量文件

【英文标题】：Parcel: using separate SCSS files for each React component, but with a variables file

【发布时间】：2020-01-09 19:06:31

【问题描述】：

即使我是 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 变量/函数？

【参考方案1】：

欢迎来到***！很棒的第一篇文章。内容丰富、清晰、切中要害。

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

来自Sass guide：

您可以创建包含少量 CSS 的小部分 Sass 文件 可以包含在其他 Sass 文件中。这是一个很好的方法 模块化您的 CSS 并帮助使事情更易于维护。 一个 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 导入的唯一性。 可选：您可以将部分导入到单个非部分文件中，然后将该文件导入到每个组件级样式表中。请参阅我的示例here。这节省了为每个组件级样式表一遍又一遍地编写多个@import 语句的时间；但是，当您可能只想要一件事时，它的缺点是要导入所有内容。

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