React- Как использовать CSS и CSS с локальной областью видимости из сторонних компонентов

Я локально просматриваю свои файлы css, используя

modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"

в webpack.config.dev и prod.js. Я могу использовать стили, которые я определил для компонентов, используя стиль импорта из ./Component.css. Теперь я пытаюсь использовать сторонний компонент response-select. Теперь у компонента есть предопределенный стиль, который я хочу использовать. Чтобы использовать его, я импортирую стиль следующим образом

импортировать 'response-select / dist / response-select.css'

Но стиль не применяется. Как включить предопределенный стиль для импортированного компонента.


reactjs javascript react-select css-modules react-css-modules
person Braj    schedule 18.07.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать resource query, чтобы обрабатывать импорт CSS по-разному в зависимости от запроса.

Таким образом, вы можете импортировать свой обычный CSS с параметром запроса ?external.

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        oneOf: [
          {
            // import 'react-select/dist/react-select.css?external'
            resourceQuery: /external/, 
            use: ['style-loader', 'css-loader']
          },
          {
            use: ['style-loader', 'css-loader'],
            options: {
              modules: true,
              localIdentName: '[name]__[local]_[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};
person Tholle    schedule 18.07.2018
comment
Я новичок в этом, поэтому мои вопросы могут показаться глупыми. В webpack.config.dev.js я собираюсь добавить следующее правило - '{// import' response-select / dist / response-select.css? External 'resourceQuery: / external /, используйте: [' style- loader ',' css-loader ']},' Теперь в компоненте ‹Select /› как использовать параметр? external query? Или мне нужно использовать? External в моих собственных компонентах сборки? - person Braj; 18.07.2018
comment
Думаю, я понял твой намек. Во внешнем компоненте ‹Select /› я должен использовать import 'response-select / dist / response-select.css? External' после добавления вышеуказанного правила. Сообщите мне, если я ошибаюсь, и я попробую. Игнорируйте мой предыдущий комментарий. - person Braj; 18.07.2018
comment
@Braj Комментарий в моем ответе, import 'react-select/dist/react-select.css?external', был просто примером того, как использовать его в вашем приложении. Если вы импортируете файл CSS с ?external в конце имени файла, Webpack будет рассматривать его как обычный CSS, а не модули CSS. Просто напишите import 'react-select/dist/react-select.css?external' один раз в своем приложении, и react-select CSS станет частью вашего CSS, как и ожидалось. - person Tholle; 18.07.2018
comment
Я попробую и расскажу вам об этом. Также будет ли обсуждение темы веб-пакетов дать мне представление о том, как веб-пакет работает в отношении css и других файлов? - person Braj; 18.07.2018
comment
Работает как шарм. Спасибо. - person Braj; 19.07.2018