Just plugged in gulp-sass into an existing project, and I'm getting an error when I try to write an RGB syntax as follows:
rgb(70 168 255 / 0.05)
The log:
[17:51:58] Starting 'compileCSS'...
Error in plugin "sass"
Message:
src/xxx.css
Error: Function rgb is missing argument $green.
on line 77 of src/xxx.css
>> background-color: rgb(70 168 255 / 0.05);
This is a valid CSS sytnax (which my chrome apparently decided it should be my default syntax). Am I forced to replace all of the occurrences with commas?
Use sass instead of node-sass.
% npm uninstall node-sass
% npm install sass
Update:
dart-sass has been deprecated in favor of sass
According to sass, node-sass doesn't support color level 4. Therefore, I used the dart-sass compiler instead.
Related
I'm getting following error after even with node-sass, sass or without both of them. But i remove node modules and node cache clean, I'm still getting this error. I tried adding node-sass and sass versions also. but still this error keep coming. this was happened after I upgrade my ag-grid version to 27.3 from 23.4.
ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after " #return math": expected expression (e.g. 1px, bold), was ".div($lhs, $rhs);"
on line 315 of node_modules/ag-grid-community/src/styles/mixins/_ag-theme-params.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-default-params.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base-mixin.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-base/sass/_ag-theme-base.scss
from line 1 of node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/_ag-theme-alpine-mixin.scss
from line 2 of D:\Projects\Operative\Repo\ag-grid-update\finance\finance-frontend\src\styles.scss
>> #return math.div($lhs, $rhs);
----------------^
need a help because I tried so many posted answers in SO.
As of Version 26 of AG Grid, Node-Sass will no longer work with AG Grid.
This is due to Node-Sass being deprecated in favor of Dart-Sass, you can find out more about this here.
For users upgrading from versions of AG Grid before 26 or new users, we would highly recommend using Sass.
For more information regarding AG Grid and Sass and how themes and styles work, please visit our documentation.
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)
I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.
Whenever I try to use a combination of Jeet and Compass I get the following error:
Syntax error: Invalid CSS after \" gutter\": expected \")\", was \": 3,\"\A on line 3 of sass/jeet/_settings.scss\A from line 15 of sass/jeet/index.scss\A from line 7 of sass/screen.scss\A \A 1: // Grid Settings\A 2: $jeet: (\A 3: gutter: 3,\A 4: parent-first: false,\A 5: layout-direction: LTR\A 6: );\A 7: \A 8: // Sass Namespacing Function
When I run just Jeet or just compass everything works fine. I've tried different versions of SASS, Jeet, and Compass but I can't seem to find either the right combination or the right settings here.
Current Versions:
Sass 3.3.0.alpha.149 (Bleeding Edge)
Compass 0.12.2 (Alnilam)
I previously had both at their latest versions.
What can I try?
Recently tried:
- Updating to Compass 0.12.6 which results in the new error: ERROR: Cannot load compass.
Previously, this is the related code from Jeet that was throwing the error:
// Grid Settings
$jeet: (
gutter: 3,
parent-first: false,
layout-direction: LTR
);
// Sass Namespacing Function
#function jeet($var) {
#return map-get($jeet, $var);
}
$g: jeet(gutter);
error sass/jeet/_settings.scss (Line 3: Invalid CSS after " gutter": expected ")", was ": 3,")
I am using it in a Yeoman scaffold with
Sass 3.3.4 (Maptastic Maple)
Compass 0.12.5 (Alnilam)
It is being compiled by "grunt-contrib-compass": "~0.7.0" and so far have had no errors.
edit:
Also those settings appear to be stylus not scss.
With the newly released csslint I wanted to try to hook it into vim as my makefile for .css files. I'm having a hard time getting the multi-line error format working for the output.
My best result so far is:
au BufRead *.css set makeprg=csslint\ %
au BufRead *.css set errorformat=%A%f:,%C%n:\ warning\ at\ line\ %l\,\ col\ %c,%C%m,%C%.%#,%C%.%#
That doesn't get the line/column numbers right though. I'm getting this output in my quickfix window:
|| csslint: There are 33 errors and warnings in bookie.css.
||
bookie.css|| 1: warning Too many font-size declarations (13), abstraction needed.
bookie.css|| 2: warning at line 3, col 3 Rule is empty. BODY {
bookie.css|| 3: warning at line 12, col 12 Values of 0 shouldn't have units specified. padding: .5em 0em;
bookie.css|| 4: warning at line 13, col 13 Values of 0 shouldn't have units specified. margin: 0em;
...
The format from csslint is:
csslint: There are 33 errors and warnings in bookie.css.
bookie.css:
1: warning
Too many font-size declarations (13), abstraction needed.
bookie.css:
2: warning at line 3, col 3
Rule is empty.
BODY {
Anyone see what's wrong with my efm? Or have something that might work? I'm trying not to go the route of writing another parse script to clean up the format. Thanks for the help.
You need to use a double backslash to escape commas in Vim's errorformat.
I just commited a CSS syntax-checker to Syntastic plugin, using CSS Lint. Just fetch the latest Syntastic version from GitHub, and install CSS Lint CLI tool, and you'll be on your way.
Please note that CSS Lint's warning/error format is pretty incosistent, but the plugin I wrote handles it pretty well. I expect it to improve in the future.
Working with vim's errorformat is a veritable nightmare. Usually I re-write lint output in shell for vim, though with the --format=compact switch it's thankfully workable.
set makeprg=csslint\ --format=compact\ %
set errorformat=%f:\ line\ %l\\,\ col\ \%c\\,\ %m
Source: https://github.com/kaihendry/vim-html5/blob/master/ftplugin/css.vim