React js react-responsive-carousel未使用webpack加载答案

【问题标题】：React js react-responsive-carousel not loading with webpackReact js react-responsive-carousel未使用webpack加载
【发布时间】：2020-12-05 05:36:51
【问题描述】：

我正在为我的项目使用 React Responsive Carousel，但我在控制台中收到此错误

ROR in ./node_modules/react-responsive-carousel/lib/styles/carousel.min.css 1:0

模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:所有 .25s 缓入；-o-transition：所有 .25s 缓入；过渡：所有 .25s 缓入；不透明度：.4；过滤器：alpha（不透明度 = 40）；位置：绝对；z-index： 2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control -arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px 实心透明;border-botto

我的 webpack 配置是：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const path = require('path')

const rootPath = path.join(__dirname, '..', '')

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(rootPath, 'index.html'),
    }),
    new CopyPlugin({
      patterns: [
        { from: 'src/assets', to: 'assets' },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /^(?!.*\.spec\.js$).*\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'eslint-loader',
            options: {
              quiet: true,
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
        },
      },
      {
        test: /\.(woff2|woff)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loaders: ['url-loader?limit=10000&minetype=application/font-woff&name=/fonts/[name].[ext]'],
        include: /fonts/,
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loaders: ['url-loader?name=/fonts/[name].[ext]'],
        include: /fonts/,
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[name].[ext]',
          'image-webpack-loader?bypassOnDebug=false&optimizationLevel=7&interlaced=false',
        ],
        include: /images/,
      },
    ],
  },
}

【问题讨论】：

标签： javascript reactjs webpack react-responsive-carousel

【解决方案1】：

您的模式 /\.s[ac]ss$/i 似乎不符合 css 扩展名。尝试将s 标记为可选，例如：

test: /\.s?[ac]ss$/i,

或者通过将 scss|sass 中的 css 拆分为新的 css 来使其更干净：

test: /\.(s[ac]ss|css)$/i,

【讨论】：