Хорошо ... этот проект требует доработки таблиц стилей.
Все ваши файлы уровня компонента .scss должны быть в той же папке , что и component, для которого это требуется. Любые частичные файлы должны быть импортированы в scss уровня компонента, который нуждается в них. Некоторые из ваших таблиц стилей делают это, но некоторые нет. Кроме того, по любой причине вы импортируете партиалы в таблицу стилей css и импортируете партиалы в таблицы стилей scss. Просто придерживайтесь scss таблиц стилей!
Подведем итог:
- Любая таблица стилей, которая должна использоваться
component, должна находиться в пределах
та же папка, что и component.
- Любая таблица стилей, которая должна использоваться многими компонентами, должна быть частичным файлом, который импортируется в таблицу стилей на уровне компонента.
Сейчас у вас есть партиалы, такие как _app_portfolio.scss файлы в Sass и таблицы стилей Portfolio.module.scss уровня компонентов, которые отдельно требуются для Portfolio.js. Это антипаттерн. Частицы должны быть таблицы стилей повторного использования , которые будут импортированы в несколько таблиц стилей уровня компонента для повторного использования.
Например, вы должны структурировать свое приложение следующим образом: ( для простоты, ваши основные папки каталогов должны быть строчными ):
├── src
| ├── components
| | └── Portfolio
| | ├── Portfolio.js
| | └── Portfolio.scss (non-partial file, this component-level stylesheet contains all of styles required for Portfolio.js)
| |
| ├── images
| ├── styles
| | ├── base
| | | └── _base.scss (partial file, include any DOM-level styles like "a" or "p", or "div", "body", "html" ... etc.)
| | |
| | ├── exts
| | | └── _extensions.scss (partial file, include any extended styles like ".clear fix", which is a classname that'll contain repetitive style patterns)
| | |
| | ├── globals
| | | └── globals.scss (non-partial file, include any GLOBAL stylesheets, like "normalize.css", this stylesheet will be directly imported into ./src/index.js like so: import "./styles/globals/globals.scss";)
| | |
| | ├── mixins
| | | └── _mixins.scss (partial file, define your mixins that'll be shared with component-level scss)
| | |
| | ├── vars
| | | └── _vars.scss (partial file, define your variables that'll be shared with component-level scss)
| | |
| | └── index.scss (OPTIONAL non-partial file that imports all of the partial files above, then this file can be imported into a component-level stylesheet. Instead of writing 4 imports for base, exts, mixins and vars, you'll just do: @import '../path/to/styles/index.scss'; now you have included all 4 partials within 1 import)
| |
| └── index.js
Как реализовать вышеуказанное ...
Компоненты / Портфолио / Portfolio.js
import React from "react";
import Profile from "../Profile/Profile";
import { portfolioContainer } from "./Portfolio.scss"; // import the className, if there are many classes, then just import them as "styles" from './stylesheet.scss'; then use: "styles.portfolioContainer", "styles.example", "styles.example2" ...etc
const Portfolio = () => {
return (
<div className={portfolioContainer}>
<Profile />
</div>
);
};
export default Portfolio;
Компоненты / Портфолио / Portfolio.scss
@import '../../styles/vars/vars.scss'; // partial file import, now we can use $variables
@import '../../styles/mixins/mixins.scss'; // partial file import, now we can use @include mixinname();
@import '../../styles/exts/extensions.scss'; // partial file import, now we can use @extend .classname;
.portfolioContainer {
@include grid-template-columns(1);
color: $brightgreen;
background: url('../../images/example.png'); // include your image imports within the component-level stylesheet -- if you import it in a partial file, then import that partial within a stylesheet, then you'll run into some pathing issues. The path defined will be relative to the partial and won't be an absolute path to the image when imported within the component-level stylesheet.
display: flex;
flex-flow: column wrap;
height: 100vh;
&::after {
@extend .clear-fix;
}
}
Взгляните на это Руководство по основам Sass .
Если вы испытываете затруднения с пониманием, см. Мой реагирующий стартовый набор , который включает в себя заметки в styles / index.scss и стилях / глобалах /globals.scss и как использовать партиалы в компоненты / Home / Home.scss и импортировать в компоненты / Home / Home.js и как использовать глобальные переменные в ЦСИ / index.js .
Поскольку вы используете create-react-app, вам может потребоваться sass-компилятор для компиляции файлов .scss в один или несколько файлов .css. К сожалению, я не использую CRA, поэтому вам придется погрузиться в документы, чтобы узнать, как это сделать.