Как применять глобальные стили с модулями CSS в приложении для реагирования?

В настоящее время я использую CSS-модули с React для моего стиля. Таким образом, каждый из моих компонентов импортирует в него компонентный файл css, например:

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

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

Это отлично работает при стилизации отдельных компонентов, но как применить глобальный стиль (html, body, теги заголовков, divs и т.д.), которые не являются специфичными для компонента?

Ответ 1

Поскольку вы используете синтаксис импорта ES6, вы можете использовать тот же синтаксис для импорта таблицы стилей

import './App.css'

Кроме того, вы можете обернуть свой класс с помощью :global, чтобы переключиться на глобальную область (этот модуль CSS не будет модулировать его, например: добавление к нему случайного идентификатора)

:global(.myclass) {
  background-color: red;
}

Ответ 2

Это можно сделать, просто добавив:

require('./App.css');

(спасибо @elmeister, который правильно ответил на этот вопрос.)

Ответ 3

Единственный способ, который я нашел для импорта стилей глобально, но только для определенного маршрута, - это добавить:

<style dangerouslySetInnerHTML={{__html: '
  body { max-width: 100% }
'}} />

внутри возврата метода render.

В противном случае тег style будет добавлен в <head>, а стили будут применены ко всем следующим маршрутам.

С https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

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

Ответ 4

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

Определите два набора правил в конфигурации вашего веб-пакета для анализа css/less файлы.
- Первое правило должно включать все глобальные стили, при условии, что он хранится в /styles/или аналогичном каталоге.
- Второе правило заключается в обработке всех локальных стилей CSS, которые в идеале должны находиться рядом с их компонентами.
- Это можно сделать с помощью параметра include и exclude при определении правила
- .или путем соблюдения соглашения об именах и правила написания соответственно, например, все модули css будут [name].module.css, и ваш тест будет проверять наличие /.module.(less|css)$/ и разобрать его.

Пример приведен ниже:

      // exclude all global styles for css modules
      {
        test: /\.(less|css)$/,
        exclude: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]'
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      // process global styles without css modules
     {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }

Используйте : local и: global при написании css/less. Если модули CSS включены, то по умолчанию будет использоваться локальный режим, вы можете указать режим в параметрах, как показано ниже:

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

Если вы определили режим как глобальный, то все включенные классы CSS не будут заменены хэшированными именами, а только те, которые вы указали как: локальные, получат уникальные имена. Например:

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

Определите функцию, которая проверяет ваш файл, чтобы определить, является ли он модулем CSS или глобальным, с помощью параметра getLocalIdent. Это метод, который я сейчас использую в моей настройке. Это также требует, чтобы ваши файлы имели некоторые соглашения об именах: [имя].module.less для модулей css и [имя].less для обычных файлов. Смотрите пример ниже:

// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");

// inside webpack rules
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    getLocalIdent: getLocalIdent
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }

// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {

    // return local name if it a global css file
    if (!cssModuleRegex.test(loaderContext.resourcePath)) {
        return localName;
    }

    if (!options.context) {
      // eslint-disable-next-line no-param-reassign
      options.context = loaderContext.rootContext;
    }

    const request = path
      .relative(options.context, loaderContext.resourcePath)
      .replace(/\\/g, '/');

    // eslint-disable-next-line no-param-reassign
    options.content = '${options.hashPrefix + request}+${localName}';

    // eslint-disable-next-line no-param-reassign
    localIdentName = localIdentName.replace(/\[local\]/gi, localName);

    const hash = loaderUtils.interpolateName(
      loaderContext,
      localIdentName,
      options
    );

    return hash
      .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
      .replace(/^((-?[0-9])|--)/, '_$1');
  }

Ответ 5

Решение 1:

Импортировать глобальные стили в начальной точке reactapp.
где все приложение реакции было wrapped в корневом компоненте.
это может быть index.js или app.js или index.html

Решение 2:

используйте scss и создайте файл main.scss и импортируйте все другие специально необходимые файлы custom scss в main.scss