Question

使用create-react-app

创建的基本Web包配置

{
   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未被网络包加载器选中。我的问题是如何将React-FlexBox-Grid添加到现有的css loader配置中。从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

如果您的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添加加载程序

2 个答案: