CODEWITHSUNDEEP
csswebpacknext.js
Musa Haidari
Musa Haidari

Reputation: 2267

What does `!important` without a value mean in CSS?

Situation:

I am trying to use bootstrap 4 stylesheet with NextJS. The bootstrap 4 stylesheet (which is complied from SASS) has many codes like:

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

which breaks the production build of NextJS, i.e. when issue yarn build I get the following error:

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.

However when I add a value before the !important in CSS the build problem is gone, e.g:

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

Question:

What does !important without a value mean and is it a valid CSS piece of code? Or is it a problem with SASS compilation? Or it is something with webpack compiler used by NextJS?

Notes:

Upvotes: 2

Views: 82

Answers (2)

andrewtweber
andrewtweber

Reputation: 25549

I think you’re missing variables.

Check what the original SASS is. It’s probably something like:

border-width: $border-width !important;

But your value for the $border-width variable is an empty string (if it were completely undefined it wouldn’t compile)

Upvotes: 1

yasaman rezaeeshirsavar
yasaman rezaeeshirsavar

Reputation: 31

I tested !important in a sass file(in vs code) without any property value and it yelled at me:

property value expectedscss(css-propertyvalueexpected)

So, it hasn't any special meaning. I think there may be a problem in your code before compilation that generates this line of code.

Upvotes: 3

Related Questions