从node_modules导入CSS时出现意外令牌

Question

我正在尝试在React项目中使用This lib。

在呈现任何内容之前，我会收到此错误：

node_modules/react-alice-carousel/lib/alice-carousel.css:1
(function (exports, require, module, __filename, __dirname) { .alice-carousel {
                                                              ^

SyntaxError: Unexpected token .

这是在我包含此模块的CSS文件之后发生的：

import 'react-alice-carousel/lib/alice-carousel.css'

现在，如果我从该文件复制/粘贴CSS，并将其直接包含在我的应用程序中，则可以正常工作，但是我认为由于某些原因，webpack并未考虑模块中的CSS文件。怎么了？

这是我的webpack配置：

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/react'],
            plugins: [[
              'babel-plugin-styled-components',
              {
                fileName: false,
                pure: true,
              },
            ], '@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
            sourceType: 'unambiguous',
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(svg|woff|woff2|ttf|eot)(\?.*$|$)/,
        use: 'file-loader',
      },
    ],
  },