Посылка: использование отдельных файлов SCSS для каждого компонента React, но с файлом переменных

Я пытаюсь найти свой способ настроить эффективный 9X_node-sass рабочий процесс веб-разработки, хотя я новичок 9X_reactjs в React и сборщиках (и их комбинации). Моя 9X_parcel цель состоит в том, чтобы каждый компонент 9X_react.js React использовал свой собственный файл 9X_sass SCSS, к которому нельзя получить доступ 9X_react-dom из таблиц стилей других компонентов. Однако 9X_react-dom должны быть некоторые глобальные файлы, такие 9X_scss как variables.scss, в этом и заключается проблема.

Вот 9X_react как сейчас выглядит моя файловая структура 9X_sass (из папки 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 9X_react-dom для импорта этих файлов SCSS. Как видите, у 9X_react-jsx каждого компонента есть своя папка с файлом 9X_react.js SCSS в ней.

Каждый компонент загружает назначенную 9X_react-component ему таблицу стилей следующим образом:

import React from 'react'; import './index.scss'; import Taskbar from '../Taskbar'; export default class App extends React.Component { render() { return ( 
 ) } }

Мне 9X_node-sass нравится придерживаться этого подхода, поскольку 9X_scss таблицы стилей используются только в том 9X_react.js случае, если сами компоненты импортированы.

Проблема

Если 9X_react вы еще раз взглянете на мою файловую структуру, в 9X_react.js папке sass есть два файла (variables.scss 9X_reactjs и mixins.scss). Я хочу, чтобы все файлы 9X_react.js в этой папке были доступны для всех компонентов.

Я 9X_parcel попытался просто импортировать файлы в приложение, чтобы 9X_node-sass он был доступен во всех файлах, например:

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

Они, конечно, загружаются, но 9X_react-jsx я не могу использовать переменные и функции, объявленные 9X_sass в этих файлах, например, в Taskbar/index.scss.

Отсюда возникает 9X_react-dom мой вопрос: как использовать эти глобальные 9X_parcel переменные / функции sass в "защищенных" файлах 9X_scss SCSS?

13
0

reactjs

sass

node-sass

parcel
1
Общее количество ответов: 1

Ответ #1

Ответ на вопрос: Посылка: использование отдельных файлов SCSS для каждого компонента React, но с файлом переменных

Добро пожаловать в stackoverflow! Отличный 9X_react первый пост. Очень информативно, понятно 9X_react и по делу.

В идеале ваш общий SCSS будет частичным, и 9X_parcel вы будете использовать синтаксис @import вместо 9X_scss import.

Из Sass guide:

Вы можете создавать частичные файлы 9X_react-component Sass, содержащие небольшие фрагменты CSS. которые 9X_react.js вы можете включить в другие файлы Sass. Это 9X_node-sass отличный способ сделайте свой CSS модульным 9X_parcel и упростите обслуживание. А partial - это просто файл Sass с начальным подчеркиванием. Ты можно назвать его чем-то вроде _partial.scss. Подчеркивание 9X_react.js позволяет Sass знайте, что файл является 9X_react только частичным файлом и что он не должен 9X_reactjs быть сгенерирован в файл CSS. Партиалы Sass используются с @import директива.

Рабочий пример:

9X_Посылка: использование отдельных файлов SCSS для каждого компонента React, но с файлом переменных_sass

Некоторые 9X_parcel дополнительные примечания ...

Субъективно 9X_parcel «лучшая» структура папок (почему см. примечания 9X_react ниже):

 └── 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 для таблиц стилей на уровне компонентов, потому что, когда вы начнете добавлять тесты, вы запутаете Webpack относительно того, какой импорт вам нужен, если вы просто напишете import Component from "./index" без расширения. Вероятность выдачи ошибок export is not a class or function составляет 50/50. Как правило, я буду использовать то же имя, что и родительская папка, или использовать styles и добавить расширение .scss к импорту, чтобы отличить его от обычного импорта .js.
  • Необязательно: вы можете импортировать частичные данные в один неполный файл и импортировать этот файл в каждую таблицу стилей на уровне компонента. См. Мой пример here. Это экономит время от многократного написания нескольких операторов @import для каждой таблицы стилей на уровне компонента; но имеет тот недостаток, что импортирует все, когда вам может понадобиться только одно.

И ... если вам скучно и у вас есть 9X_react-dom время, я подробно расскажу, почему мне нравится 9X_sass этот folder structure.

14
0