[英]Import custom css webpack loader
I want to include a custom .css in the main.tsx file I have. 我想在main.tsx文件中包含一个自定义.css。 This is the error I get:
这是我得到的错误:
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.
The custom .css file I use has this content: 我使用的自定义.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;
}
And here is the module of my webpack file: 这是我的webpack文件的模块:
module: {
rules: [
{
test: /\.css$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
]
}
I tried also adding style-loader
and get the same error. 我也尝试添加
style-loader
并得到相同的错误。 The webpack version is 4.16.5. 该webpack版本是4.16.5。
It's choking on the pseudo-element. 伪元素令人窒息。 It could be that it doesn't support the double-colon syntax.
可能是它不支持双冒号语法。 It may be a red herring, but try single colons:
input[type="number"]:-webkit-outer-spin-button, input[type="number"]:-webkit-inner-spin-button
. 它可能是红色鲱鱼,但请尝试使用单个冒号:
input[type="number"]:-webkit-outer-spin-button, input[type="number"]:-webkit-inner-spin-button
。
You can use style-loader
with minimize-loader
and use can do something like below: 您可以将
style-loader
与minimize-loader
使用,并且可以执行以下操作:
module: {
rules: [
{
test: /\.css$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'style-loader','css-loader?minimize-loader','postcss-loader'
]
},
]
}
And even not working then add postcss-loader
as well. 甚至不起作用,然后还要添加
postcss-loader
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.