0

使用 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
 }

不确定如何在不破坏现有工作配置的情况下添加加载程序。

4

2 回答 2

1

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

假设您的 css 加载器看起来像这样：

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

然后尝试像这样添加 flexbox 网格加载器：

{test: /(\.css)$/, loaders: ['style', 'css', 'style!css?modules'], include: /flexboxgrid/}
于 2016-12-21T14:55:34.683 回答
1 
{   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)/
},
于 2017-05-04T08:55:38.677 回答