问题

Question

即使我是React和bundlers（以及这两者的结合）的新手，我仍在设法建立高效的Web开发工作流。我的目标是让每个React组件使用其自己的SCSS文件，其他组件的样式表无法访问该文件。不过，仍然需要一些全局文件，例如dataframe.index[getIndex]，这是问题所在。

这是我的文件结构（来自src文件夹）目前的样子：

variables.scss

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

每个组件都按如下方式加载其指定的样式表：

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

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

问题

如果再看看我的文件结构，则sass文件夹中有两个文件（variables.scss和mixins.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>
    )
  }
}

这些当然可以加载，但是我不能在这些文件中声明的变量和函数，例如import '../../sass/variables.scss'; import '../../sass/mixins.scss';中使用。

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

Answer 1

欢迎来到stackoverflow！很棒的第一篇文章。非常有用，清晰明确。

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

来自Sass guide：

您可以创建包含少量CSS片段的部分Sass文件您可以将其包含在其他Sass文件中。这是一个很棒的方法使您的CSS模块化并有助于使事情更易于维护。 A 部分只是一个以下划线开头的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。

包裹：为每个React组件使用单独的SCSS文件，但带有变量文件

问题

1 个答案: