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

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

import './App.css'

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

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

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

require('./App.css');

(спасибо @elmeister, правильно ответившему на этот вопрос.)

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

1. Define two sets of rules in your webpack config for parsing css/less files.
   • The first rule should be to include all global styles, assuming it's kept in /styles/ or similar directory.
   • Второе правило - обрабатывать все стили CSS с локальной областью видимости, в идеале они должны находиться рядом с их компонентами.
   • Это можно сделать с помощью параметра включить и исключить при определении правила.
   • или путем обеспечения соблюдения соглашения об именах и правила записи соответственно, например, все модули 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"
        ]
      }

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

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

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

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

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

3. Определите функцию, которая проверяет ваш файл, чтобы решить, является ли он модулем css или глобальным, используя параметр getLocalIdent. Это метод, который я сейчас использую в своей настройке. Это также требует, чтобы ваши файлы имели некоторое соглашение об именах: [name] .module.less для модулей css и [name] .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's 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');
  }

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

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

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

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

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

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

Другой простой способ использовать модуль css:

<style jsx global>{`
     .slick-prev:before,
     .slick-next:before {
         color: somecolor;
      }
`}</style>

Решение 1.

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

Решение 2:

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