Adding a Sass Stylesheet

Note: this feature is available with react-scripts@2.0.0 and higher.

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in and components, we recommend creating a component with its own .Button styles, that both and can render (but not inherit).

Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.

To use Sass, first install sass :

$ npm install sass # or $ yarn add sass 

Now you can rename src/App.css to src/App.scss and update src/App.js to import src/App.scss . This file and any other file will be automatically compiled if imported with the extension .scss or .sass .

To share variables between Sass files, you can use Sass’s @use rule. For example, src/App.scss and other component style files could include @use «./shared.scss»; with variable definitions.

This will allow you to do imports like

@use 'styles/_colors.scss'; // assuming a styles directory under src/ @use '~nprogress/nprogress'; // loading a css file from the nprogress node module 

Note: You can prefix paths with ~ , as displayed above, to resolve modules from node_modules .

sass also supports the SASS_PATH variable.

To use imports relative to a path you specify, you can add a .env file at the project root with the path specified in the SASS_PATH environment variable. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3 .

Note: For the Windows operating system, separate your paths by semicolons.

SASS_PATH=path1;path2;path3 

Tip: You can opt into using this feature with CSS modules too!

Note: If you’re using Flow, override the module.file_ext setting in your .flowconfig so it’ll recognize .sass or .scss files. You will also need to include the module.file_ext default settings for .js , .jsx , .mjs and .json files.

[options] module.file_ext=.js module.file_ext=.jsx module.file_ext=.mjs module.file_ext=.json module.file_ext=.sass module.file_ext=.scss 

Note: LibSass and the packages built on top of it, including Node Sass, are deprecated. If you’re a user of Node Sass, you can migrate to Dart Sass by replacing node-sass in your package.json file with sass or by running the following commands:

$ npm uninstall node-sass $ npm install sass # or $ yarn remove node-sass $ yarn add sass 

Подключаем Sass к Create-React-App

Недавно, Facebook выпустили фантастический инструмент для создания React приложений на основе набора минимальных и упрямых идей, чтобы помочь начинающим начать изучение React, не беспокоясь за свойственный для него сложный инструментарий. С добавлением команды eject, которая позволяет раскрыть скрипты сборки, настройки и другие файлы работающие за кулисами, create-react-app стал чрезвычайно полезным инструментом, как для начинающих, так и для экспертов.

Для начала, установим и сохраним необходимые инструменты из npm, выполнив следующую команду в корне вашего проекта:

npm install sass-loader node-sass --save-dev

Добавление Sass к вашему create-react-app проекту потребует от вас выполнение команды eject. Так же из корня проекта:

npm run eject

После того как команда успешно выполнится, найдите папку config в которой находится два файла конфигурации WebPack. Каждый из этих файлов соответствует определённой среде разработки — dev (разработка) или prod (продакшен). Откройте конфигурационный файл webpack.config.dev.js и найдите блок loaders в блоке module.

В WebPack, loaders (загрузчики, лоадеры) позволяют разработчикам выполнять «предварительную обработку (pre-process)», перед тем как они потребуются или будут загружены. create-react-app использует множество загрузчиков для обработки различных задач сборки, таких как транспайлинг (transpiling) с помощью babel, автоматическая расстановка префиксов с помощью PostCSS. Для того чтобы подключить Sass к вашему проекту, нужно добавить загрузчик, который может обрабатывать Sass файлы.

Начало блока loaders должно выглядеть примерно вот так:

loaders: [ // Process JS with Babel. < test: /\.js$/, include: paths.appSrc, loader: 'babel', query: require('./babel.dev') >, . 

После начала массива loaders вы можете добавить свой загрузчик. Тот Sass загрузчик который мы установили может обрабатывать как Sass, так и Scss файлы.

Теперь когда Sass загрузчик находится на месте, вы можете использовать Sass файлы. Например, в компоненте App.js, который идёт по умолчанию с create-react-app, вы можете написать:

import './App.sass';

Обратите внимание на то, что вы также должны переименовать ваш файл App.css в App.sass.

• Больше о Sass загрузчике вы можете прочитать здесь.
• Больше о Webpack загрузчиках в целом вы можете прочитать здесь.
• Больше о create-react-app инструменте вы можете прочитать здесь.

Подключение и настройка create-react-app

Для работы с React вам будет нужна Node.js выше, чем 14.0.0 на вашем компьютере. Подробнее:

1. Установить node.js
2. Убедиться в том, что node установлена, для этого в терминале можно пробрать в теминале node -v

Для установки Create React App и создания шаблона выполните команды:

npx create-react-app cv-builder cd cv-builder npm start

Где cv-builder , это название проекта.

Исходный файл index.js будет выглядеть как-то так:

import React from "react"; import ReactDom from "react-dom"; import App from "./App"; ReactDom.render(  , document.getElementById("app") );

Зачем нужен React.StrictMode

StrictMode — нужен для обнаружения потенциальных проблем в приложении еще на этапе разработки приложения.

• Обнаружении небезопасных методов жизненного цикла
• Предупреждении об использовании устаревшего API строковых реф
• Предупреждении об использовании устаревшего метода findDOMNode
• Обнаружении неожиданных побочных эффектов
• Обнаружении устаревшего API контекста

Простыми словами — консоль будет красной даже при малейшей ошибке.

Установка uimini:

Для того чтобы установить uimini потребуется написать:

npm install uimini // or: yarn add uimini

Далее, в корневом файле index.js подключить uimini:

import React from "react"; import ReactDom from "react-dom"; // init main app import App from "./App"; // init uimini import "uimini"; // . 

Установка и подключение scss create-react-app:

Чтобы установить scss / sass в create-react-app необходимо лишь установить пакет node-sass :

npm install node-sass --save-dev // или: yarn add node-sass --save-dev

После чего перезапустить сервер!

После этого scss нужно подключать в любые js , jsx файлы по типу:

import "./assets/scss/main.scss";

Примеры компонентов на реакте:

Главный файл app.js с применением uimini будет выглядеть вот-так:

const App = () => ( 
  
 
 
Hello world!
 
 
 
 
 );

Такой подход позволит «прилепить» футер к низу, а хедер оставить вверху.

1. components/Header/Header.jsx
2. components/Footer/Footer.jsx

Являются простыми, поэтому описывать их здесь я пока не вижу смысла, а вот главный файл components/index.js будет выглядеть как-то так:

// components: export from "./Header"; export from "./Footer";

Подключение шрифта в create-react-app

Самый простой, но самый не эффективный способ это cdn от гугла.

Название шрифта, который решил использовать я — Inconsolata . Для подключение шрифта в файл public/index.html нужно добавить:

А в файл scss/main.scss добавить:

.ui-body, .ui-html

Более эффективный способ был бы скачать шрифт и подключить в проект локально, без cdn.

Исходники:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨

Как добавить scss в react?

Кто сможет помочь, как мне добавить scss в react приложение?

• Вопрос задан более двух лет назад
• 4986 просмотров

1 комментарий

Простой 1 комментарий

чем проект собираете? Через Webpack? Если через Create React App, то там уже встроена поддержка

Решения вопроса 1

AndriiNovak13 @AndriiNovak13

npm i node-sass@4.14.1 установи эту версию

Ответ написан более двух лет назад

Комментировать

Нравится Комментировать

Ответы на вопрос 2

JS *овнокодер

В create-react-app он уже есть. Просто создавайте файл SomeName.scss файл и пишите код.

Ответ написан более двух лет назад

Нравится 2 2 комментария

Никита Стечкин @VAMPIRE37 Автор вопроса

Выдает ошибку «./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref—5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref—5-oneOf-6-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref—5-oneOf-6-4!./src/App.scss)»

Никита Стечкин, хз, должно работать. Удалите папку node-modules и сделайте npm install.

Ответ написан более двух лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

• HTML
• +3 ещё

Верстка блоку отзивов,как сделать так как на дизайне?

• 1 подписчик
• 10 часов назад
• 49 просмотров