I'm trying to precompile the assets in production but I'm getting an error. I googled it for hours but could not find the answer. Please see the code and error below:
Sass::SyntaxError: Invalid CSS after "...-menu > li:not(": expected ")", was "":.treeview") >..."
***.css
.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
border-bottom-right-radius: 4px;
}
Its raising error near not. Can anyone help me out. Its just a simple syntax change.
Try only using "#Import" in your aplication stylesheet, some scss assets break when you use "require"
why? because require is for ".css", #import is for ".scss" (sass)
if you are importing assets from a gem, look for that gem documentation on how to replace require with import
Related
I just started writing sass and on my first lines
body{
background-color: #272727;
color: white;
}
I get an error of
--------------------
Change Detected...
index.sass
--------------------
Compilation Error
Error: Invalid CSS after "body{": expected "}", was "{"
on line 1 of sass/c:\Users\user\desktop\Scripts\cryptoChess\src\Assets\Style\index.sass
>> body{ {
-----^
--------------------
I am using the live sass compiler extension on vs code. Anyone know how to fix this?
It looks like you're using the .sass file extension for index.sass for a scss file. You need to change it to use the scss file extension for it to compile.
See also:
Sass Invalid CSS Error: "expected expression"
We use webpack to compile some sass file into CSS hier is fragment of SASS file:
.#{$prefix}title {
color: $title-color;
}
Which is compiled into following CSS:
.x-titlebar .x-title {
color: #fff;
color: var(--base-foreground-color);
}
And we have some strange behavior in the components. Removing first rule with color constant - doesn't work too.
But if we remove the second color rule with variable - it works fine.
We've tested it with last Chrome 93.x and last Edge 93.x version - equal result.
We use sass-loader#10.2.0 & node-sass#6.0.1 newer version doesn't compatible with ExtReact 7.4.0
Is there any possibility to tell sass-loader do not put the rule with variable into compiled CSS?
Edited: I've found the main cause. The CSS are compiled by the sencha-fashion package.
In the project folder there is node_modules\#sencha\cmd\dist\js\node_modules\fashion\defaults.json file.
In the file is following section
"cssVars": {
"enable": true
}
After I've switched it to false - all variable rules disappears and it solves my problem. The file is part of node_modules #sencha\cmd and is called indirectly via #sencha/ext-webpack-plugin and will be lost if I clean and rebuild the project.
The question is now - how to configure this using #sencha/ext-webpack-plugin?
I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
I'm struggling with the dotLESS #import to have a separate variables file; I just constantly get "variable is undefined".
If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an #import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.
The variables file LESS-config.less is:
/*
.LESS VARIABLES
*/
#mbw_dark_cyan: #1293b5;
#mbw_cyan: #11add4;
#mbw_magenta: #e935da;
#control_text: #ffffff;
#action_delete: #ff5400;
#section_level1_bg: #mbw_dark_cyan;
#section_level1_fg: #control_text;
#button_bg: #mbw_dark_cyan;
#button_fg: #control_text;
#button_icon: #control_text;
#data_table_header: #mbw_cyan;
.dummy {
color: #control_text;
}
Which renders as:
/*
.LESS VARIABLES
*/
.dummy {
color: #ffffff;
}
Calling stylesheet main.css is:
#import (less) '/css/LESS-config';
button {
background: #button_bg;
}
Which gives the error:
variable #button_bg is undefined on line 4 in file '/css/main.css':
[3]: button {
[4]: background: #button_bg;
----------------^
[5]: }
As I said, if I replace the import with the same variables copied and pasted, it all works fine.
I've tried saving without BOM as in another answer, but that doesn't help.
EDIT, I've tried:
Removing the (less)
Changing to double quotes
Using relative path LESS-config as opposed to virtual absolute as above
Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to
web.config (cache is already false)
Adding debug="1"
Adding
debug="true"
Absolutely no change in behaviour.
EDIT 2:
I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.
So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!
FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:
This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553
The complete fix was to:
Upgrade dotLESS to version 1.6.7
Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method
not found error
Change the file extension of the import from .css to .less
Now all working.
Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.
I potentially see two problems that you have.
You are trying to call #import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.
Change your main.css to a main.less file and now try generating your css from main.less as your root file.
Assuming your import url for LESS-config.less is correct.
The above mentioned corrections should probably do the trick.
#import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less #import Rules).
If you want to use #import in your CSS, it should follow this syntax (See here)
#import url|string list-of-mediaqueries;
But, you cannot import a Less file inside your CSS anyways.
The way I would have done this:
Say you have 3 .less files: config.less, color.less, header.less
I would create a style.less file with the following content:
/*------------------------------------------------------------------------------*/
style.less
/*------------------------------------------------------------------------------*/
/* 01. config */
#import "config.less";
/* 02. color */
#import "color.less";
/* 03. header */
#import "header.less";
Then I would complie style.less which would produce, style.css and I would include style.css in my website.
I have an angular 5 appplication. When I execute ng b --prod it shows me the following messages:
Warning in Invalid selector ';
.space1x at 6219:39. Ignoring.
The style space1x in style.css is:
.space1x {
padding-left: 200px;
}
When I see in deployed css (styles.75b74.bundle.css), the style space1x is omitted.
What is happening in this case?
I was checking style.css and I finally solved it. I'll tell my way:
In some place of style.css contains the following instructions:
.pagination li.page-item a{color: #333};
.space1x {
padding-left: 200px;
}
In first line the semicolon is outside from right brace. So when I deploy by ng s --prod, angular omits space1x in style.css bundle. Therefore, the correct instruction should be like this:
.pagination li.page-item a{color: #333;}
By doing this, warning disappears and space1x is included in style.css bundle.
Angular 5 with SCSS, it was working and also this class available in bundle.css file, after the build.