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
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.
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)
Related
I get the following error when running next build:
HookWebpackError: Expected a pseudo-class or pseudo-element.
at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets
(See the full error at https://pastebin.com/JLQ2aR2f)
I've been trying to debug this issue for ~3hrs, and it's driving me crazy. I would appreciate any help on how I could better debug the next build command? I tried using the --debug flag, but it didn't seem to do anything.
So far I know this is an issue with tailwindcss (I assume postcss), as when I remove that section of my global.scss the program works again (or actually after I comment out the full file EXCEPT for tailwind it still breaks, commenting out tailwind leads to other issues).
Oh, some other debugging I've tried:
Searching through my entire project w/ regex to find any invliad tailwind classes (using (["'])(.*\b\w+: )(.*)(\1) to locate classes like md: text-red-600 but not md:text-red-600)
reinstalled all node_modules
commenting out all CSS files (which stops the issue!)
used both yarn classic and node to run the command (and npx) as opposed to yarn v3 which is what I currently use for development
Any help is appreciated!
It turns out the answer was an error in tailwind.config.js. One of my keyframes looked like this:
expand: {
...
'80%:': {
opacity: 0.5,
},
...
},
Notice the double colon after 80%.
I would encourage everyone with this issue to check classNames, .css files, and also tailwind.config.js for any extra colons.
We have an Angular 11 project that use Angular Material and some scss files. I try to update it to Angular 11.
I executed the first command for Angular and Angular CLI without problem / error and our build works well :
npx #angular/cli#12 update #angular/core#12 #angular/cli#12
We have a problem after the command line that update Angular Material 12 :
npx #angular/cli#12 update #angular/material#12
It updates the package.json with the new 12 versions and modify our scss files ( with #use for instance and othe things , I don't know exactly the process update...)
We use scss-bundle ( version 2.4.0 ) to bundle several scss files in one with this command ( I hide my company name with XXX ;-) ):
scss-bundle -p . -e ./projects/#XXX/ang-ui/src/assets/XXX-theme.raw.scss -d ./projects/#XXX/ang-ui/src/assets/XXX-theme.scss
and the following error is thrown :
[Error] There is an error in your styles:
Invalid CSS after "...typography: mat": expected expression (e.g. 1px, bold), was ".define-typography-" on line (386, 24)
I don't know where is the file with line 386, I did not find it but after isolation th problems seems to come from this content and I really don't know what is the problem :
#use '~#angular/material' as mat;
#import '~#angular/material/theming';
$custom-typography: mat.define-typography-config($font-family: 'Arial,Helvetica,sans-serif',
$headline: mat.define-typography-level(32px, 48px, 700),
$body-1: mat.define-typography-level($text-size, 24px, 500));
...
Any idea ?
When I apply the following SASS in my component's style, it works as supposed to.
$test-color: pink;
div{ background-color: $test-color; }
However, when I move the definition to styles.scss, it doesn't. I've tried adding the (now, apparently, deprecated) #import "../styles.scss"; and also the currently recommended #use "../styles.scss";. I even tried to put the color definition in colors.scss and add that reference to angular.json. The styles for classes declared in styles.scss work (even without importing/using, due to it being references in the assets). But the variable, doesn't.
According to this suggestion, it should work with #include. In this docs, it's shown how to assign the values. I found this linking to this but I can't see how that differs from my case. I tried to understand this blog but couldn't see any relevant hints on what I'm doing wrong. I also tried adding the following (as shown here).
"stylePreprocessorOptions": { "includePaths": [ "src" ] }
I still get the error below, though.
ERROR in ./src/app/.../some.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
14 │ background-color: $test-color;
___ │ _________________ ^^^^^^^^^^^^
src\app...\some.component.scss 14:23 root stylesheet
Googling the actual error gave me this saying that the variable isn't there. But as far I can tell, it is! A related, although a bit different, question was asked here but with no relevant answer.
What am I missing and how do I investigate it further?
The error is due to wrong syntax as pointed out. It needs to reference the source of the colors.
background-color: colors.$test-color;
Furthermore, the import is required but needs to be done by reference to the module and not to the file.
#use "colors";
In a wholesome code base, one should put the following in the file src\colors.scss.
$test-color: pink;
Then you could use it like this.
#use "colors";
div{ background-color: colors.$test-color; }
In the config file angular.json, the following needs to be set.
"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },
Also, it's should be noted that files prefixed by an underscore are subject to a different processing and as such, _colors.scss is preferred. While it's valid and working to place the auxiliary files directly in /src (as is the case with styles.scss, the convention dictates to place them in /src/assets/styles, altering the pre-processor's options as below.
"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }
I'm getting the following error when trying to use Sass Maps (which look like object variables):
Invalid CSS after " primary": expected ")", was ": #3097D1,"
(in /Users/.../app/assets/stylesheets/new_design.scss:19)
I reproduced the error by using the following minimal example:
$theme-colors: (
primary: #3097D1,
secondary: black
);
#each $key, $val in $theme-colors {
.foo.#{$key} {
color: $val;
}
}
Expected:
.foo.primary {
color: #3097D1;
}
.foo.secondary {
color: black;
}
But getting the error mentioned.
sass-rails, ~> 5.0.0 seems to be installed according to the Gemfile:
gem 'sass-rails', '~> 5.0.0'
I'd assume that loads one of the latest sass versions which should support object variables.
I have the feeling the current version I have is not recognizing this syntax.
How can I make sure I have the right sass version? Is there anything else I have to do to compile this syntax successfully?
bundle show sass-rails shows 5.0.6, which seems recent.
as discussed in the comments there is a stackoverflow discussion about a similar issue with the map sass syntax
The discussion refers to Github Issue 1088
I quote
There's a number of issues with the indented syntax, and Sass maintainers aren't going to fix them. :( They say, the .sass parser is weird and hard to refactor.
I find Sass syntax to be quicker to type and easier to read. It is deprived of the visual noise:
indented_vs_bracketed
It's also much easier to do copy-pasting.
So Sass maintainers, PLEASE don't let the indented syntax fall behind!
Probably by digging down in the discussion we will be able to find the solution. Now I am quoting the solution from the owner of the post Ionică Bizău:
wrapping the values between quotes, saving, reloading in browser without any errors, and then removing the quotes back and reloading the page in browser solved the problem. Maybe it was something cached somewhere... but I can't understand where. I didn't restart rake or ran any bundle command... Thanks! :)
I have twitter bootstrap setup to build in a new project, but am getting the following error from VS2010.
Fatal error, cannot continue: Octal escape sequences are only supported in ECMAScript 3 compatibility mode.
Which seems to be related to the following CSS/Less entry in bootstrap (type.less)...
blockquote small:before {
content: '\2014 \00A0';
}
Can anyone help?
Just wanted to say that I had this error too, and the problem for me ended up being with Chirpy. I tried to make a merged css file with it, but i was using .min files and i didn't use the chripy Minify="false" parameter in my File node. Added that parameter and that fixed it right up