Как использовать CSS-модули с create-реагировать-приложение? - PullRequest
Новая
       50

Как использовать CSS-модули с create-реагировать-приложение?

0 голосов
/ 08 мая 2018

Согласно сообщению Дана Абрамова, поддержка CSS-модулей есть в приложении create-реагировать (CRA). Нужно просто дать расширение module.css его таблицам стилей, чтобы включить эту функцию, но это не работает со мной. У меня версия 1.1.4 react-scripts. Как я могу включить модули CSS с CRA? Спасибо

Ответы [ 3 ]

0 голосов
/ 02 июля 2018

Вам не нужно извлекать.

Create-React-App поддерживает модули CSS прямо из коробки начиная с версии 2, которая теперь стабильна.

Обновите до v2 (react-scripts@latest) , запустив yarn upgrade react-scripts@latest.

Вам просто нужно создать файл с расширением .module.css

Например: 

.myStyle {
  color: #fff
}

Тогда вы можете использовать его так: 

import React from 'react'
import styles from 'mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>
0 голосов
/ 26 марта 2019

Чтобы включить модуль CSS в ваше приложение, вам не нужно извлекать create-реагировать на приложение. Вы можете выполнить эти простые шаги, описанные в по этой ссылке , чтобы использовать модуль CSS в своем проекте.

Но в случае, если вы удалили ваше приложение create-реагировать, вы должны найти файл с именем

"webpack.config.js"

откройте этот файл и найдите {test: cssRegex .... etc} в строке №. 391 и заменить на это изменения: 

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
            },

Открыть файл .js и оператор импорта, подобный этому 

import cssStyleClassName from './MyApp.css';

Тогда этот оператор импорта позволяет вам делать следующие изменения в тегах компонентов, как это 

<div className={cssStyleClassName.styleName}></div>

styleName - это то, что вы определили в своем файле MyAppStyle.css 

.styleName{
your properties here...
}

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

Примечание В более ранней версии было два сгенерированных файла для производства и dev отдельно. Теперь в текущей версии один файл с именем "webpack.config.js", файл, к которому вам нужно обратиться за изменения. Спасибо.

0 голосов
/ 08 мая 2018

Вам нужно извлечь create-реагировать на приложение, а затем в конфигурационных файлах для веб-пакета вы добавляете эти 2 строки enter image description here

И чтобы использовать его, загрузите css в Component, который вам не нужен (я добавил компонент, и его css находится в той же папке) 

import classes from './SomeComponentStyle.css';

... 

<div className={classes.RedDiv}>

внутри SomeComponentStyle.css 

.RedDiv {
  /* styles for red div */
}
...