2

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:

  • yarn dev works fine
  • "dependencies": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1" }
  • NodeJS version: v12.18.2
  • Platform: WSL2 on Windows 10
Musa Haidari
  • 2,109
  • 5
  • 30
  • 53
  • 5
    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) – andrewtweber Feb 14 '21 at 18:48
  • Does this answer your question? [What does !important mean in CSS?](https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css) – SuperStormer Feb 14 '21 at 19:10
  • @SuperStormer thanks for the input, but not, this is a totally different situation – Musa Haidari Feb 14 '21 at 19:26
  • @andrewtweber Thanks, this fixed my problem. Why wouldn't you post it as an answer?! – Musa Haidari Feb 14 '21 at 19:27
  • 1
    It felt like too much of a guess. Posted as answer :) – andrewtweber Feb 14 '21 at 23:05

2 Answers2

3

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.

yasaman rezaeeshirsavar
  • 31
  • 3
  • Thanks for the feedback, and the general flow. However I am using a template which has a lot of complex logic (which I do not want to debug now) which suppresses the errors or warnings for SASS – Musa Haidari Feb 14 '21 at 19:40
1

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)

andrewtweber
  • 24,520
  • 22
  • 88
  • 110