React电话号码输入导致cypress上的webpack错误

Question

当我尝试运行使用 react-phone-number-input 的 cypress 测试时，出现 webpack 错误，此错误仅出现在 cypress 中，我的 react 项目不显示此错误并且工作正常，是否有解决方案可以消除此错误的 webpack 或 cypress？

Error: Webpack Compilation Error
./node_modules/react-phone-number-input/style.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* CSS variables. */

> :root {
|   --PhoneInputCountrySelect-marginRight: 0.35em;
|   --PhoneInputCountrySelectArrow-width: 0.3em;
 @ ./src/components/InputPhoneNumber/index.js 15:0-44
 @ ./src/components/SignUpForm/index.js
 @ ./src/components/ProductForm/index.js
 @ ./src/tests/ProductForm.spec.js

我的 Webpack 配置是这样的

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public' }
      ]
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader' // inject CSS to page
          },
          {
            loader: 'css-loader' // translates CSS into CommonJS modules
          },
          {
            loader: 'postcss-loader', // Run postcss actions
            options: {
              plugins: function () { // postcss plugins, can be exported to postcss.config.js
                return [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader' // compiles Sass to CSS
          }
        ]
      }
    ]
  }
}

Answer 1

css-loader 不编译 css 根参数。

这个答案将帮助您解决问题 https://github.com/webpack-contrib/css-loader/issues/69#issuecomment-108597013