导入自定义CSS Webpack加载程序

Question

我想在main.tsx文件中包含一个自定义.css。 这是我得到的错误：

ERROR in ./src/assets/style.css 1:20
Module parse failed: Unexpected token (1:20)
You may need an appropriate loader to handle this file type.

我使用的自定义.css文件具有以下内容：

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

这是我的webpack文件的模块：

module: {
  rules: [
    {
      test: /\.css$/,
      include: /node_modules/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    },
  ]
}

我也尝试添加style-loader并得到相同的错误。 该webpack版本是4.16.5。

Answer 1

伪元素令人窒息。 可能是它不支持双冒号语法。 它可能是红色鲱鱼，但请尝试使用单个冒号： input[type="number"]:-webkit-outer-spin-button, input[type="number"]:-webkit-inner-spin-button 。

Answer 2

您可以将style-loader与minimize-loader使用，并且可以执行以下操作：

module: {
 rules: [
{
  test: /\.css$/,
  include: /node_modules/,
  use: [
    MiniCssExtractPlugin.loader,
    'style-loader','css-loader?minimize-loader','postcss-loader'
   ]
  },
 ]
}

甚至不起作用，然后还要添加postcss-loader 。