css - 没有值的 `!important` 在 CSS 中意味着什么？

Question

情况:

我正在尝试将 Bootstrap 4 样式表与 NextJS 一起使用。 bootstrap 4样式表(从SASS编译)有很多代码，例如:

.checkbox.checkbox-accent > span {
  border-width: !important;
}

这破坏了 NextJS 的生产构建，即当发出 yarn build 时，我收到以下错误:

yarn run v1.22.4
$ next build
info  - Creating an optimized production build
Failed to compile.

TypeError: Cannot read property 'toLowerCase' of undefined


> Build error occurred
Error: > Build failed because of webpack errors
    at /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/index.js:441:19
    at async /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/tracer.js:1:1441
error Command failed with exit code 1.

但是，当我在 CSS 中的 !important 之前添加一个值时，构建问题就消失了，例如:

.checkbox.checkbox-accent > span {
  border-width: unset !important;
}

问题:

没有值的 !important 是什么意思？它是一段有效的 CSS 代码吗？还是SASS编译的问题？或者是 NextJS 使用的 webpack 编译器的问题？

注释:

• yarn dev 工作正常
• "dependency": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1"}
• NodeJS 版本:v12.18.2
• 平台:Windows 10 上的 WSL2

Answer 1

我在一个没有任何属性值的 sass 文件(在 vs code 中)中测试了 !important，它对我大喊大叫:

property value expectedscss(css-propertyvalueexpected)

所以，它没有任何特殊含义。我认为您的代码在编译之前生成这行代码可能存在问题。