babel-plugin-реагировать- css -модули не изменяет имя класса в теге style - PullRequest
Новая
       24

babel-plugin-реагировать- css -модули не изменяет имя класса в теге style

0 голосов
/ 14 января 2020

Я хочу использовать babel-plugin-react-css-modules для создания уникальных имен классов, поэтому я сделал Po C: я выбросил create-ract-app, затем добавил babel-plugin-react-css-modules к плагинам в пакете. json: 

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "babel-plugin-react-css-modules"
    ]
  },

Когда я запускаю приложение, я вижу, что класс в HTML задан правильно, но внутри тега <style> это обычное .App имя:

enter image description here

Я что-то упустил? Я думаю, что это должно быть довольно легко настроить, и я делаю глупую ошибку, которую не вижу. Заранее благодарим за каждый ответ.

Редактировать: Приложение. js код: 

import React from 'react';
import './App.css';

function App() {
  return (
    <div styleName="App">
      Test app
    </div>
  );
}

export default App;

1 Ответ

2 голосов
/ 18 января 2020

Rant : Одна из многих причин, по которой я против create-react-app (CRA), заключается в том, насколько гибкой она может быть, когда дело доходит до настройки . Если вы хотите включить функции, я бы порекомендовал создать собственную конфигурацию веб-пакета. Почему? Вы познакомитесь с Webpack, как его настроить, как работать в его пределах и как добавлять / изменять / настраивать пакеты в соответствии с вашими потребностями.

При этом CRA поставляется с обоими глобальными настройками. и локальный (модуль) CSS импортирует и конфликтует с babel-plugin-react-css-modules (BPRCM). CRA ожидает, что .css файлы без module.css будут обычным глобальным импортом. Между тем, BPRCM ожидает, что файлы .css будут импортированы локально. Это не только конфликт, но и несоответствие. По умолчанию CRA ищет App.module.css, где module.css указывает, что это модулированный импорт, например так: import { App } from "./App.module.css";. Таким образом, он назначает localIdentNames как [file/folder]_[local]_[hash], как указано здесь , здесь и в пределах извлеченного config/webpack.config.js (строки 432-456 - используется пакет react-dev-utils/getCSSModuleLocalIdent).

Чтобы разрешить эти конфликты, вам нужно установить sh a localIdentName (по умолчанию BPCRM использует это generateScopedName: [путь] ___ [имя] __ [локальный] ___ [ха sh: base64: 5] (4-й вариант в таблице), поэтому я буду использовать его для моего примера ниже), затем вам нужно будет добавить BPRCM к webpack.config.js в babel-loader поскольку CRA не ищет конфигурацию babel, вам придется удалить правило импорта модуля CSS и, наконец, вам нужно добавить некоторые параметры в их глобальное правило CSS, чтобы сделать его локальным и использовать localIdentName.

Вот рабочий пример : https://github.com/mattcarlotta/cra-css-modules

Для использования репо выше :

  • откройте окно терминала на ~/Desktop и клонируйте репо: git clone git@github.com:mattcarlotta/cra-css-modules.git
  • cd в папку cra-css-modules и введите yarn install или npm install
  • тип yarn start или npm start для запуска примера

Что я изменил :

  • Объявлено localIdentName для соответствия Имя класса BPRCM по умолчанию (, вы можете изменить это имя на любое другое, и оно все равно будет работать с приведенным выше примером репозитория ).
  • Добавлено BPRCM к babel-loader rule.
  • Добавлена ​​конфигурация modules для переключения глобального CSS правила на локальное CSS rule
  • Удалены локальные модули CSS rule .
  • Изменены все classNames на styleName в App. js файле.
...