Как включить файл sass в reactjs

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

Есть два способа добавить SASS или SCSS в проект create-react-app.

Установить с помощью: сценариев NPM

Этот метод более простой и может работать без извлечения вашего проекта. Если вы предпочитаете не извлекать, воспользуйтесь этим методом. Щелкните здесь, чтобы узнать о том, как установить Sass или Scss с помощью сценариев NPM, посмотреть официальное руководство проекта.

Установить с помощью: Webpack

Этот метод не такой простой, но более расширяемый и автоматизированный. К сожалению, этот метод требует выброса. Удаление проекта, хотя и полезно во многих сложных случаях, означает, что вам будет нелегко получить будущие обновления create-react-app.

Перед запуском установите и сохраните необходимые инструменты из выбранного вами упаковщика, выполнив одну из следующих команд в каталоге вашего проекта.

Пряжа:yarn add sass-loader node-sass --dev

НПМ:npm install sass-loader node-sass --save-dev

Для добавления sass или scss в проект приложения create-react-app сначала потребуется выполнить извлечение, что можно сделать, выполнив следующую команду в базовом каталоге проекта.

npm run eject

После завершения извлечения найдите папку конфигурации, в которой, помимо прочего, находятся два файла конфигурации веб-пакета. Каждый из этих файлов конфигурации соответствует разной среде - разработке или производству. Войдите в файл конфигурации разработки webpack.config.dev.js и найдите блок loaders внутри блока modules.

В webpack грузчики позволяет разработчику «предварительно обрабатывать» файлы по мере их необходимости / загрузки. Приложение Create React использует несколько загрузчиков для обработки различных задач сборки, таких как транспиляция с помощью babel, префикс PostCSS или разрешение импорта ресурсов. Чтобы добавить в этот проект Sass или Scss, вы добавите загрузчик, который может обрабатывать файлы Sass и Scss.

Начало блока loaders до любой модификации должно выглядеть примерно так, как показано ниже (точный код может измениться в будущих версиях CRA).

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

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

Если вы предпочитаете SASS, вы можете добавить:

{
  test: /\.sass$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

Если вы предпочитаете SCSS, вы можете добавить:

{
  test: /\.scss$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

Важный: В более новых версиях create-response-app, если вы видите массив exclude в конфигурации вашего веб-пакета, вам необходимо добавить следующие строки в

/\.sass$/,
/\.scss$/,

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

import './App.sass'; // or `.scss` if you chose scss

Обратите внимание, что вам также нужно будет преобразовать файл «App.css» в Sass и изменить его имя файла на «App.sass».

Ссылка взята из этот сайт.

В последней версии create-react-app вам не нужно извлекать приложение для реагирования, чтобы добавить поддержку sass.

Просто добавьте node-sass в свой проект:

НПМ: npm install node-sass --save

ПРЯЖА yarn add node-sass

И теперь вы можете импортировать файлы sass в свои компоненты React. Проверьте официальную документацию здесь

Я использовал файлы "scss" и столкнулся с проблемой при их импорте в компонент.

Вот решение, которое я нашел.

Шаг 1: обновите typings.d.ts (я использую файлы TSX). и добавьте следующий код на корневом уровне

declare module '*.scss';

Шаг 2: импортируйте файл scss с расширением в файл компонента (например, TodoComponent.tsx)

import styles from "./score-widget.component.scss";

шаг 3: добавьте стили в оператор возврата

import * as React from "react";
import { IScoreWidget } from "../models/score-widget-model";
import styles from "./score-widget.component.scss";

function ScoreWidget(props) {

  const css = styles;  //storing styles in const

  return (
    <React.Fragment>

      <style>{css}</style>  //added css in code

      <div className = "score-prop-container">
        <!--Your component logic goes here-->

      </div>
    </React.Fragment>
  );
}

export default ScoreWidget;