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

Question

使用 create-react-app 创建的基本 web-pack 配置

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

使用以下 npm 命令安装了 React-FlexBox-Grid

npm i -S react-flexbox-grid

安装了以下依赖项

npm i -D npm style-loader css-loader

它接缝 React-FlexBox-Grid 没有被 web-pack 加载器选中。我的问题是如何将 React-FlexBox-Grid 添加到现有的 css 加载器配置中。来自 React-FlexBox-Grid 文档 https://github.com/roylee0704/react-flexbox-grid 建议的两个设置我不知道如何

1)

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

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

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

How can I add loader for React-FlexBox-Grid in webpack.config.dev.js file?

javascript

reactjs

webpack

create-react-app

react-flexbox-grid