Как добавить загрузчик для React-FlexBox-Grid в файл webpack.config.dev.js

Question

Использование основных конфигураций веб-пакетов, созданных с помощью create-реагировать-приложение

{
   test: /\.css$/,        
   loader: 'style!css?importLoaders=1!postcss'      
}

Установил React-FlexBox-Grid с помощью следующей команды npm

npm i -S react-flexbox-grid

Установлены следующие зависимости

npm i -D npm style-loader css-loader

Это швы React-FlexBox-Grid не выбирается загрузчиком веб-пакета. Мой вопрос здесь заключается в том, как добавить React-FlexBox-Grid к существующей конфигурации загрузчика CSS. Из документа React-FlexBox-Grid https://github.com/roylee0704/react-flexbox-grid предложены две настройки, я не уверен, как

1)

{
  test: /\.css$/,
  loader: 'style!css?modules',
  include: /flexboxgrid/,
}

2)

 {
  test: /\.css$/,
  loader: 'style!css!postcss',
  include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
  exclude: /flexboxgrid/, // so we have to exclude it
 }

Не уверен, как добавить загрузчик, не нарушая существующие рабочие конфигурации.

Answer 1

Если у вас уже есть загрузчик css в вашей конфигурации webpack, я бы посоветовал вам добавить его следующим образом.

при условии, что ваш загрузчик CSS выглядит примерно так:

{test: /(\.css)$/, loaders: ['style', 'css']}

затем попробуйте добавить загрузчик сетки flexbox следующим образом:

{test: /(\.css)$/, loaders: ['style', 'css', 'style!css?modules'], include: /flexboxgrid/}

Я надеюсь, что вы найдете это полезным.

Answer 2

Попробуй как этот

{   test: /\.css$/,
            loader: "style-loader!css-loader",
            exclude: __dirname + './node_modules/react-flexbox-grid',
},
{
            test: /(\.scss|\.css)$/,
            loader: 'style!css?modules!sass',
            include: __dirname + './node_modules/react-flexbox-grid',
            exclude: /(node_modules)/
},