Как да използвате CSS модули с приложението Create React

Кратък отговор: не можете. Трябва да ⏏

 ⏏

Актуализиране на 18 януари 2018 г. Поддръжката на CSS модул е ​​кацнала в алфа-версии на Create React App v2 .

Ето как да използвате CSS модули с Create React App v2!

Прочетете дали трябва да добавите CSS модули към по-стар екземпляр v1 CRA.

Приложението за създаване на React от Facebook е чудесен начин да започнете бързо нов проект React. Той поддържа много разумни и популярни настройки по подразбиране. Но ако искате да добавите неподдържана функционалност - например CSS препроцесорна стъпка като CSS модули, например, ще трябва да извадите и да излезете сами.

Тази статия ще обясни как да използвате CSS модули в приложението Create React….

Стартирането на нов проект със Create React App (просто ще го нарека CRA за кратко) означава, че вече не е нужно да управлявате куп възлови модули и да обърквате конфигури на Webpack. След като инсталирате CRA в глобален мащаб ($ прежда глобално добавете създайте-реагирайте-приложение), стартирането на нов проект е толкова лесно, колкото:

$ create-react-app myApp
$ cd myApp /
$ начална прежда

Хубава подробност е, че CRA постоянно се актуализира, така че никога не трябва да актуализирате ръчно пакета за създаване-реагиране на приложения.

Върви по своя собствен път

Получавате много сила от тези малки команди. За съжаление, ако искате да направите нещо извън това, което предоставя CRA, ще трябва да извървите своя собствен път.

Слуховете са, че командата

командата "изтласкване" ⏏

Create React App идва с удобна малка команда за онези от нас, които имат собствени мнения за съставките на страхотна настройка на React: командата eject:

$ изваждане на прежда

Приложението Create React README е доста ясно за плюсовете и минусите на изхвърлянето:

Забележка: това е еднопосочна операция. След като извадите, не можете да се върнете!
Ако не сте доволни от инструмента за изграждане и избора на конфигурация, можете да извадите по всяко време. Тази команда ще премахне единичната зависимост на изграждането от вашия проект.
Вместо това той ще копира всички конфигурационни файлове и преходните зависимости (Webpack, Babel, ESLint и т.н.) направо във вашия проект, така че да имате пълен контрол върху тях. Всички команди, с изключение на изваждането, ще продължат да работят, но те ще насочат към копираните скриптове, така че можете да ги ощипвате. В този момент вие сте сами.
Не е нужно никога да използвате изхвърляне. Избраният набор от функции е подходящ за малки и средни разположения и не бива да се чувствате задължени да използвате тази функция. Ние обаче разбираме, че този инструмент не би бил полезен, ако не можете да го персонализирате, когато сте готови за него.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject

Предлагам ви да прочетете внимателно и да прецените дали сте готови да направите разцеплението.

Ето какво се случва при изхвърляне

$ изваждане на прежда
Сигурни ли сте, че искате да изхвърлите? Това действие е постоянно. [Y / N]
> у
Изваждане ...
Копиране на файлове в / Потребители / потребител / src / myApp

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

Стартирането на състояние на Git на вашия проект след изпълнение на изваждане на преждата показва засегнатите файлове и директории:

$ git статус
Промени, които не са поетапно ангажирани:
 модифициран: package.json
Непроследени файлове:
 довереник /
 скриптове /

Ангажирайте тези промени и сте готови да конфигурирате CSS модули.

CSS модули

Няма да ви казвам колко са страхотни CSS модули. Предполагам, че вече сте просветлени. Ако не прочетете това. Той има най-добрите илюстрации:

Вече не е необходимо да мислим интензивно за CSS.

Нека влезем направо и да инсталираме CSS модули, нали?

Инсталиране на CSS модули

Късмет ни! Оказва се, че проектът, генериран от изхвърлянето от CRA, включва всички възлови модули, от които се нуждаем, за да получим CSS модули, работещи в Webpack. Не е необходимо да инсталираме допълнителни зависимости!

Конфигуриране на CSS модули

Намерете секцията css-loader във вашата конфигурация за разработка на Webpack (config / webpack.config.dev.js: 186 по време на писане) и променете частта с опции така:

// преди
{
  товарач: requ.resolve ("css-loader"),
  настроики: {
    importLoaders: 1,
  }
}
// след
{
  товарач: requ.resolve ("css-loader"),
  настроики: {
    importLoaders: 1,
    модули: true,
    localIdentName: "[име] __ [местно] ___ [хеш: base64: 5]"
  }
}

Направете същото във вашата конфигурация за производство на Webpack (config / webpack.config.prod.js: 191):

// преди
{
  товарач: requ.resolve ("css-loader"),
  настроики: {
    importLoaders: 1,
    минимизиране: вярно,
    sourceMap: true,
   }
}
// след
{
  товарач: requ.resolve ("css-loader"),
  настроики: {
    importLoaders: 1,
    модули: true,
    минимизиране: вярно,
    sourceMap: true,
   }
}

Забележка: можете да оставите localIdentName от вашата производствена конфигурация и ще получите формата на име на клас по подразбиране, който е просто грозен [hash: base64].

И това е!

Ако стартирате стартиране на преждата сега, ще видите, че приложението ви вече е напълно неустроено. Парадоксално това означава работата му.

Актуализирайте своите classNames, за да използвате CSS модули

Приложението ви изглежда толкова брутално, защото сега всъщност трябва да използвате CSS модули в компонентите си. За да започнете, просто отворете компонентите си и направете няколко промени:

  1. Задайте импортирани таблици стилове на локални постоянни стилове за импортиране от './SomeComponent.css'.
  2. Заменя низовете className във вашия JSX с обектни индекси className = {styles.myClass}.
  3. CSS модулите не допускат тирета („-”) в имената на класове, така че ще трябва да актуализирате всички класове, които използват тире. Ще трябва да направите тази промяна както в CSS, така и в JSX, но хубав бонус е, че имената на вашия клас ще бъдат по-прости - .App-header става само .header например.

Ето как изглежда компонентът src / App.jsx на приложението:

Преди CSS модули:

import React, {Component} от 'react';
импортиране на лого от './logo.svg';
import './App.css';
клас приложение разширява компонент {
  render () {
    връщане (
      
        
          лого           

Добре дошли в React

                 

          За да започнете, редактирайте src / App.js и запазете за презареждане.                     );   } }

приложение за експортиране по подразбиране;

След CSS модули:

import React, {Component} от 'react';
импортиране на лого от './logo.svg';
импортиране на стилове от './App.css';
клас приложение разширява компонент {
  render () {
    връщане (
      
        
          лого           

Добре дошли в React

                 

          За да започнете, редактирайте src / App.js и запазете за презареждане.                     );   } }

приложение за експортиране по подразбиране;

Сега сте сами

Готово сте! Няма повече Създаване на React App. Сега вие сте свободни да използвате каквото искате за CSS Preprocessor. Ти си вече пораснал.

Ако все още не сте готови да извадите, знам поне още един подход, който ви позволява да добавяте поддръжка на CSS модул, без да изваждате. Но това добавя още една зависимост към вашия проект, която противоречи на точката на придържане към CRA.

Надявам се този малък съвет да ви е от полза. Или поне ви направи по-малко страх да се изхвърлите. И разбира се, ако знаете за по-добър начин да използвате CSS модули с Create React App, уведомете ме в коментарите!

Допълнителна информация

  • Създайте React App: https://github.com/facebookincubator/create-react-app
  • CSS модули: https://glenmaddern.com/articles/css-modules
  • Уебпакет: https://webpack.github.io/

5 юли 2017 г. - примери актуализирани за използване на синтаксиса за конфигуриране на Webpack 3 (благодаря Том Лейкър и Ани Пенъл)