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