Как установить scss в react

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

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

• Вопрос задан более трёх лет назад
• 5194 просмотра

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.

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

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

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

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

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

• React
• +1 ещё

Как правильно реализовать проверку на наличие новых сообщений?

• 1 подписчик
• вчера
• 69 просмотров

Подключаем 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 инструменте вы можете прочитать здесь.

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 

Как установить scss в React TypeScript

SCSS (Sassy CSS) — это расширение языка CSS, которое предоставляет множество дополнительных возможностей и улучшений для разработки стилей. Если вы разрабатываете приложение на React с использованием TypeScript и хотите использовать SCSS для стилизации компонентов, эта статья была написана специально для вас.

React — это библиотека JavaScript, которая используется для создания интерактивных пользовательских интерфейсов. TypeScript — это язык программирования, который добавляет статическую типизацию к JavaScript. Комбинация React и TypeScript позволяет разработчикам создавать мощные и надежные приложения.

Установка SCSS в ваш проект на React TypeScript довольно проста. Начните с создания нового проекта с помощью инструмента создания React приложений, такого как Create React App. Затем, после создания проекта, вы можете установить необходимые пакеты для работы с SCSS.

В этой статье мы рассмотрим, как установить SCSS в React TypeScript, настроить его и начать использовать его для стилизации компонентов. Мы также рассмотрим некоторые лучшие практики и полезные советы по работе со SCSS в React TypeScript.

Установка SCSS в React TypeScript проект

Вот пошаговое руководство, которое поможет вам установить SCSS в ваш React TypeScript проект:

1. Убедитесь, что у вас установлен Node.js. Вы можете проверить его, запустив в командной строке команду node -v . Если Node.js не установлен, вы можете загрузить его с официального сайта Node.js.
2. Создайте новый React TypeScript проект, если у вас его еще нет. Вы можете использовать инструмент Create React App, выполнив в командной строке команду npx create-react-app my-app —template typescript , где «my-app» — имя вашего проекта.
3. Перейдите в каталог вашего проекта, выполнив команду cd my-app .
4. Откройте файл package.json вашего проекта и убедитесь, что в разделе «scripts» есть следующие строки кода:

"scripts":

Примечание: Если эти строки кода отсутствуют, добавьте их в файл package.json .

1. Установите пакет node-sass , выполнив команду npm install node-sass .
2. Переименуйте файлы с расширением .css в .scss . Например, переименуйте файл App.css в App.scss .
3. Откройте файл App.tsx и замените импорт файла стилей на import ‘./App.scss’; .
4. Измените скрипты в секции «scripts» файла package.json следующим образом:

"scripts": < "start": "react-scripts start", "build": "react-scripts build && node-sass src/ -o src/", "test": "react-scripts test", "eject": "react-scripts eject" >

Примечание: Эта команда компилирует все файлы .scss в директории src/ в соответствующие файлы .css при каждой сборке проекта.

Теперь вы успешно установили SCSS в ваш React TypeScript проект. Вы можете использовать все возможности SCSS для разработки стилей в вашем проекте.

Конфигурация SCSS в React TypeScript

Для использования SCSS в проекте на React TypeScript необходимо выполнить несколько шагов для его правильной настройки.

1. Установка зависимостей:

 npm install node-sass@4.14.1 --save-dev npm install sass-loader@10.0.5 --save-dev 

2. Создание файла конфигурации webpack:

 const path = require('path'); module.exports = < module: < rules: [ < test: /\.scss$/, use: [ < loader: 'sass-loader', options: < implementation: require('node-sass'), >, >, ], >, ], >, resolve: < extensions: ['.scss'], >, sassLoader: < implementation: require('node-sass'), >, >; 

3. Добавление SCSS-файлов в проект:

 import React from 'react'; import './App.scss'; const App: React.FC = () => < return ( 
 
 ); >; export default App; 

Теперь, после выполнения всех этих шагов, SCSS можно использовать в проекте на React TypeScript без проблем.

Примечание: Если вы не используете TypeScript, файл конфигурации webpack может быть немного другим, но необходимые зависимости и правила загрузчика все равно должны быть добавлены.