导入自定义CSS Webpack加载程序

时间:2018-08-17 09:15:06

标签: javascript typescript webpack

我想在我拥有的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。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:-1)

您可以将style-loaderminimize-loader结合使用,并且可以执行以下操作:

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

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