CSS 中没有值的 `!important` 是什么意思？答案

【问题标题】：What does `!important` without a value mean in CSS?CSS 中没有值的 `!important` 是什么意思？
【发布时间】：2021-05-17 19:05:13
【问题描述】：

情况：

我正在尝试将 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 工作正常
"dependencies": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1" }
NodeJS 版本：v12.18.2
平台：Windows 10 上的 WSL2

【问题讨论】：

我认为您缺少变量。检查原始 SASS 是什么。它可能类似于border-width: $border-width !important，但$border-width 变量的值是一个空字符串（如果它完全未定义，则不会编译）
这能回答你的问题吗？ What does !important mean in CSS?
@SuperStormer 感谢您的意见，但不是，这是完全不同的情况
@andrewtweber 谢谢，这解决了我的问题。您为什么不将其发布为答案？！
感觉猜的太多了。发布为答案:)

标签： css webpack next.js

【解决方案1】：

我在没有任何属性值的 sass 文件（在 vs 代码中）中测试了 !important，它对我大喊大叫：

属性值期望scss(css-propertyvalueexpected)

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

【讨论】：

感谢您的反馈和一般流程。但是我使用的模板有很多复杂的逻辑（我现在不想调试），它抑制了 SASS 的错误或警告

【解决方案2】：

我认为你缺少变量。

检查原始 SASS 是什么。大概是这样的：

border-width: $border-width !important;

但是$border-width 变量的值是一个空字符串（如果它完全未定义，它将无法编译）

【讨论】：