如何在webpack.config.dev.js文件中为React-FlexBox-Grid添加加载器

Question

Using basic web-pack configurations created by create-react-app

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

Installed React-FlexBox-Grid using following npm command

npm i -S react-flexbox-grid

Installed the following dependencies

npm i -D npm style-loader css-loader

It seams React-FlexBox-Grid is not picked by the web-pack loader. My question here is how to add React-FlexBox-Grid to the existing css loader configuration. From the React-FlexBox-Grid document https://github.com/roylee0704/react-flexbox-grid suggested two settings I am not sure how to

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
 }

Not sure how to add the loader without breaking the existing working configurations.

Answer 1

if you already have a css loader in your webpack config I would suggest you add it as follows.

assuming your css loader looks something like this:

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

then try adding the flexbox grid loader as such:

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

I do hope you find this useful.

Answer 2

Try like this one

{   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)/
},