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

在伪元素上令人窒息。可能是它不支持双冒号语法。可能是鲱鱼，但请尝试使用单个冒号：{ "rules": { ".read": "auth != null", ".write": "auth != null" } }。

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。

导入自定义CSS Webpack加载程序

2 个答案: