如何在webpack.config.dev.js文件中添加React FlexBox-Grid加载程序？

Question

使用创建反应应用程序创建的基本web包配置。

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

安装的React FlexBox-网格使用以下npm命令

npm i -S react-flexbox-grid

安装了以下依赖项

npm i -D npm style-loader css-loader

它的接缝反应-FlexBox-网格不是由网络包加载器选择的。我在这里的问题是如何向现有的css加载程序配置中添加React FlexBox-Grid。从React FlexBox-Grid文档中，https://github.com/roylee0704/react-flexbox-grid建议了两个设置，我不知道如何

1)

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

1. ​

 {
  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

如果您已经在webpack配置中有一个css加载程序，我建议您按以下方式添加它。

假设您的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)/
},