Используйте модули CSS в приложении React Create

React.js

В этой статье описываются два способа использования модулей CSS в шаблонах создания приложений React.

Предварительные условия

Пожалуйста, сначала установите плагин create-react-app глобально, команда установки: npm install create-react-app -g

Сначала используйте команду create-react-app, чтобы загрузить проект каркаса и установить команду:

# 使用 npx
$ npx create-react-app my-app

# 使用 npm 
$ npm init npx create-react-app my-app

# 使用 yarn
$ yarn create react-app my-app

запустить проект

$ cd my-app

# 使用 npm
$ npm start

# 或者使用yarn
# yarn start

Введите в браузереhttp://localhost:3000Посмотреть эффективность проекта

Первый способ использования модуля CSS

Конфигурация использования модулей CSS встроена в приложение create-реагировать, текущий способ — использовать встроенное использование приложения create-реагировать

Способ

Измените все .css/.lee/.scss и другие файлы стилей на .module.css/.module.less/.module.scss и т. д. Вы можете использовать модули CSS для импорта и использования.

Применение

Напишите файл css: Button.module.css

.error {
    background-color: red;
}

При написании обычного файла css: Another-stylesheet.css

.error {
    color: red;
}

Ссылка в файле js с использованием модулей CSS: Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

Посмотреть эффект в браузере

В настоящее время цвет фона компонента Button красный, но цвет шрифта не красный, потому что после использования Css-модулей обычный стиль css не будет работать, и его нужно писать глобально (:global) . Результат окончательного стиля, добавленного к элементу:<button class="Button_error_ax7yz">Error Button</button>

Второй способ использования модуля CSS

Способ

  • запустить в командной строкеnpm run ejectЗаказ

    Эта команда отобразит все скрытые конфигурации в скаффолдинге, этот процесс необратим.

  • После запуска откройте файл webpack.config.js в каталоге конфигурации и найдитеtest: cssRegexэта линия

  • В методе, выполняемом атрибутом использования, добавьтеmodules: true,Как показано ниже:

    添加 modules 属性

Применение

Использование такое же, как и в первом методе, но нет необходимости добавлять суффикс .module в файл css.

Напишите файл css: Button.css

.error {
    background-color: red;
}

Напишите еще один обычный файл css: Another-stylesheet.css

.error {
    color: red;
}

Ссылка в файле js с использованием модулей CSS: Button.js

import React, { Component } from 'react';
import styles from './Button.css'; // 可以直接使用 CSS Modules 的方式引入了
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

Посмотреть эффект в браузере

В настоящее время цвет фона компонента Button красный, но цвет шрифта не красный, потому что после использования Css-модулей обычный стиль css не будет работать, и его нужно писать глобально (:global) . Результат окончательного стиля, добавленного к элементу:<button class="Button_error_ax7yz">Error Button</button>

Если вы хотите использовать второй метод для ссылки на то, как sass и less также используют модули CSS, то аналогичным образом добавьте конфигурацию синтаксического анализа sass и lessmodules: trueВот и все.

Уведомление

Скаффолдинг create-react-app по умолчанию не может напрямую использовать sass и меньше писать css напрямую, вам нужно сначала настроить его.

Чтобы узнать, как включить синтаксис sass и less в скаффолдинге create-react-app, обратитесь к моей следующей статье:

Включите Sass и Less в приложении Create React.

Категории