Использование модуля CSS с внешней библиотекой пользовательского интерфейса в приложении Create React

На React существуют тысячи шаблонов, и один из них - Create React App (CRA). С помощью этих шаблонов вы можете многое сделать. И в случае, если вы хотите сэкономить время, чтобы разработать новое веб-приложение с внешней библиотекой пользовательского интерфейса. Между тем вы предпочитаете использовать модуль CSS для настройки компонента, а CSS настройки хешируется как _3Cj0yJNB6Fk-9VD_CdCoyf. Хорошо, вот шаги для решения:

Пожалуйста, следуйте инструкциям CRA для настройки и создания шаблона здесь

1. Извлеките конфигурацию CRA с помощью команды

$ yarn eject
Are you sure you want to eject? This action is permanent. [y/N]
> y
Ejecting...
Ejected successfully!

2. Обновите конфигурацию CRA для модуля CSS.

Перейдите в файл «config / webpack.config.dev.js». Найдите раздел css-loader и замените его, как показано ниже:

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
  },
}
//add more options like this
//with [name]_[local], it's easier to inspect the element and find //out the location of element in develop environment
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]"
  },
}

Сделайте это с файлом «config / webpack.config.prod.js»

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    minimize: true,
    sourceMap: true,
  },
}
//add more options like this
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    minimize: true,
    sourceMap: true,
   },
},

Повторите код в файле «src / App.css», как показано ниже.

.app {
  text-align: center;
}
.logo {
  animation: spin infinite 20s linear;
  height: 80px;
}
.header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}
.title {
  font-size: 1.5em;
}
.intro {
  font-size: large;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Замените файлом «src / App.js».

import React, { Component } from 'react';
import logo from './logo.svg';
import styles from './App.css';
class App extends Component {
 render() {
  return (
   <div className={styles.app}>
    <header className={styles.header}>
     <img src={logo} className={styles.logo} alt="logo" />
     <h1 className={styles.title}>Welcome to React</h1>
    </header>
    <p className={styles.intro}>
     To get started, edit <code>src/App.js</code> and save to reload.
    </p>
   </div>
  );
 }
}
export default App;

Перезапустите веб-приложение с помощью «yarn start», осмотрите элемент, и вы увидите что-то, как показано ниже:

Это означает, что модуль css хорошо работает с вашим веб-приложением.

3. Добавьте внешнюю библиотеку пользовательского интерфейса.

В этом руководстве я использую Semantic-UI как внешнюю библиотеку пользовательского интерфейса. Вы можете выбрать любую библиотеку по своему усмотрению. Запустите, как показано ниже, чтобы добавить semantic-ui-css и semantic-ui-react к вашему проекту.

$ yarn add semantic-ui-css semantic-ui-react

Импортировать библиотеку css в файл «src / index.js»

import 'semantic-ui-css/semantic.min.css';

К сожалению, что-то идет не так, где находится переменная, которая повторно представлена ​​для этой библиотеки css, и если вы используете какой-либо компонент из semantic-ui, он не работает. Фактически, он вам больше не нужен, как показано ниже:

Откройте файл config / webpack.config.dev.js и обновите

{
  test: /\.css$/,
  exclude: [/src/],
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      }
    }
  ]
},
{
  test: /\.css$/,
  exclude: [/node_modules/],
  use: [
  require.resolve('style-loader'),
  {
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]"
  },
.
.
.

Сделайте то же самое с config / webpack.config.prod.js.

{
  test: /\.css$/,
  exclude: [/src/],
  loader: ExtractTextPlugin.extract(
    Object.assign({
      fallback: {
      loader: require.resolve('style-loader'),
      options: {
        hmr: false,
      },
    },
      use: [{
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          minimize: true,
          sourceMap: shouldUseSourceMap,
        },
      }]
    })
  )
},
{
  test: /\.css$/,
  exclude: [/node_modules/],
  loader: ExtractTextPlugin.extract(
    Object.assign(
.
.
.

Остановите сервер с помощью Ctrl + C и запустите снова с помощью «старта пряжи»
Теперь вы можете использовать css из Semantic CSS в сочетании с модулем CSS. Например, выпадающий компонент из Semantic

<div className="ui selection dropdown">
  <input type="hidden" name="gender" />
  <i className="dropdown icon" />
  <div className="default text">Gender</div>
  <div className="menu">
    <div className="item" data-value="1">Male</div>
    <div className="item" data-value="0">Female</div>
  </div>
</div>

Если вы хотите настроить CSS, выполните следующие действия: styles.custom - это ваш CSS из пользовательского файла CSS.

<div className={`ui selection dropdown ${styles.custom}`}>
  <input type="hidden" name="gender" />
  <i className="dropdown icon" />
  <div className="default text">Gender</div>
  <div className="menu">
    <div className="item" data-value="1">Male</div>
    <div className="item" data-value="0">Female</div>
  </div>
</div>

Вы сделали

Отсюда вы можете одновременно использовать как модуль css, так и внешний css. Это поможет вам сэкономить много времени на воссоздании нового компонента. Удачи :)
Если есть вопросы. Пожалуйста, оставьте это в разделе комментариев. Мир !