引入React轮播组件时CSS Loader失效，配置仍报错求助

我一眼就看出问题所在啦——你的Webpack配置里的include: [/src/]把Loader的处理范围限制在了项目的src目录下，但react-responsive-carousel的样式文件是放在node_modules里的，根本没被当前的Loader规则匹配到，所以才会报“找不到合适loader”的错误。

给你两个可行的解决方案，按需选择：

方案一：扩展Loader的匹配范围 #

修改现有规则的include，把react-responsive-carousel的样式目录也加进去，这样Loader就会处理它的CSS文件了：

{ 
  test: /\.s?css$/, 
  include: [/src/, /react-responsive-carousel\/lib\/styles/], 
  use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: ['css-loader', 'postcss-loader', 'sass-loader'], 
  }), 
}

如果想更宽泛一点（不推荐，会增加编译时间），也可以直接去掉include字段，让Loader处理所有目录下的.css/.scss文件。

方案二：单独处理第三方库的样式 #

更高效的做法是新增一条规则专门处理node_modules里的CSS文件，毕竟第三方库的样式一般不需要经过postcss-loader和sass-loader处理，这样能减少不必要的编译步骤：

// 处理项目src目录内的自定义样式
{
  test: /\.s?css$/,
  include: /src/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader'],
  }),
},
// 处理node_modules中的第三方样式
{
  test: /\.css$/,
  include: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader'],
  }),
}

最后提醒一下：修改完Webpack配置后，一定要重启你的开发服务器，不然配置不会生效哦！如果你的项目用的是Webpack 4及以上版本，其实官方已经推荐用mini-css-extract-plugin替代ExtractTextPlugin了，不过如果还在使用旧版，上面的配置依然能解决问题。

内容的提问来源于stack exchange，提问作者The Walrus