Как да добавите SASS / SCSS към проект за създаване-реагиране на приложение

(Забележка: Последната версия на create-react-app има вградена SASS поддръжка и това ръководство не е необходимо.)

Това обяснява как да добавите прекомпилатора SASS / SCSS към съществуващ проект създаване-реагиране на приложение. Това ще работи с обикновените или Typescript вариации на create-react-app и трябва да работи независимо от многобройните варианти на синтаксиса на конфигурацията на webpack.

изхвърлям
Ще трябва да извадите проекта си, ако още не сте го направили. Правих това много пъти, но може да бъде голяма страшна стъпка, така че прочетете тук, за да разберете какво означава да изхвърлите проекта си. Това е необходимо, за да редактирате ръчно вашите конфигурационни файлове на уебпакет.

npm стартиране на изхвърляне

Инсталирайте SASS
Прекомпилаторът SASS работи в момент на изграждане, а не по време на работа, затова го запазваме с превключвателя save-dev.

npm инсталирайте sass-loader node-sass --save-dev

Редактиране на Конфигуриране на уеб пакет
Ще отворите своя dev config файл, намерете съществуващия блок правило css, дублирайте го и го използвате като еталон, за да създадете нов блок правило на scss. Оставете съществуващото правило css там като-е, така че вашият проект да работи както с SCSS, така и с обикновени CSS файлове.

Намерете файл config / webpack.config.dev.js. Потърсете блока с правила за css. Ще изглежда нещо подобно, но не точно:

{
  тест: /\.css$/,
  употреба: [
    {
      товарач: requ.resolve ('стил-товарач'),
    }
    {
      товарач: requ.resolve ("css-loader"),
      настроики: {
        importLoaders: 1,
      }
    }
    {
      товарач: Requir.resolve ("postcss-loader"),
      настроики: {
        ident: 'postcss',
        приставки: () => [
          изискват ( "postcss-flexbugs-корекции"),
          autoprefixer ({
            браузъри: [
              '> 1%',
              „последните 4 версии“,
              „Firefox ESR“,
              'не т.е. <9',
            ],
            flexbox: „no-2009“,
          }),
        ],
      }
    }
  ]
}

Копирайте и дублирайте целия блок и го добавете точно над (преди) съществуващия блок css. Редактирайте новата стойност на „тест“, за да направите това scss:

{
  тест: /\.scss$/,

Поставете секцията за зареждане на sass в средата на новото правило веднага след секцията css-loader. Вмъквате трите реда в средата отдолу. Новото правило за scss ще изглежда така, но не точно:

{
  тест: /\.scss$/,
  употреба: [
    {
      товарач: requ.resolve ('стил-товарач'),
    }
    {
      товарач: requ.resolve ("css-loader"),
      настроики: {
        importLoaders: 1,
      }
    }
    {
      товарач: requ.resolve ('sass-loader'),
    }
    {
      товарач: requ.resolve ("postcss-loader"),
      настроики: {
        ident: 'postcss',
        приставки: () => [
          изискват ( "postcss-flexbugs-корекции"),
          autoprefixer ({
            браузъри: [
              '> 1%',
              „последните 4 версии“,
              „Firefox ESR“,
              'не т.е. <9',
            ],
            flexbox: „no-2009“,
          }),
        ],
      }
    }
  ]
}

Може да изглежда странно да има „css-loader“ в правилото на scss, но е необходимо, така че webpack да обработва правилно компилирания css, след като бъде съставен от scss.

Редактиране на уеб конфигурация за конфигурация
Направете същата процедура „Редактиране на конфигурацията на уебпакет“ отново за файл config / webpack.config.prod.js. Съществуващият CSS блок ще изглежда малко по-различно във файла prod, но процедурата е основно същата. Следвайте съществуващите модели в правилото css и ще се оправите.

Сега трябва да имате правило scss и правило css във всеки конфигурационен файл. Нищо особено да правя сега, освен да създадете SCSS файлове вместо CSS. По желание можете да оставите старите си CSS файлове във вашия проект и те ще бъдат комбинирани с вашия SCSS, тъй като имате правила и за двете!