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.
Related
I have this css class .number in my React app which I use for numbers in a code editor. This style works perfectly locally, when I start the app with npm start. However, when deployed, this .number class gets overridden by some other .number class, which I have no idea where it comes from, it's no where in my code, and it breaks my style. Đ¢his is the style from my deployed app (pic 1). The first .number is my class, defined in index.css and this other is defined in other.sass but this file doesn't exist in my code.
The second photo describes the style used in my local app. As you can see, this style and that from other.sass do not correspond. This is the code as well:
.number {
align-items: center;
border-radius: 9999px;
display: inline-flex;
text-align: center;
vertical-align: top;
}
Do you happen to know what is the potential reason for this kind of bug, how can I debug it and how can I fix it?
This looks like some kind of bundler (webpack, parcel) or postprocessing (PostCSS, ...) is runnning via an npm script and generates the "confusing" part which you don't understand and is wrong here.
I would first try to understand which npm script runs when you deploy the app to find out which process generates the interfering class and fix it there. Usually, the command for this script can be found in the package.json in the build script.
If this does not work, simply rename the .number class to .example-number to give it a higher specificity, so that the correct styles are being applied.
I'm trying to build a web page with sass. I have a _mixins.scss file where I have written:
#mixin gradient{
background: background(//etc);
}
and a partial class _navbar.scss file where I define a class .menu and attempt to use the mixin:
#use '../custom' as *;
.menu{
#include gradient
li {
padding: 0 0.7rem;
a{
color: $white !important
text-transform: capitalize;
}
}
}
In visual studio code, intellisense has no problem with the #include, #mixin, and #use statements. Pressing "ctrl + click" on #use points to the correct file.
I am running "npm run compile:sass" in a Gitbash window, and the scss is compiling fine. The html file has a link to the stylesheet in style.css, the file where sass compiles the .scss code to.
Everything seems connected, and indeed everything up to now has been working fine until tryin to use a mixin.
I have googled the issue, looked at similar questions here, and cannot find a way to resolve this.
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?
so iv'e started learning sass and i'm now in a spot when i added a class to my html (.circle)
and my sass file is already linked to my css file.
when i typed .circle to my sass file and tried to give him a color i incountred in the next error:
This selector doesn't have any properties and will not be rendered.
error styles.sass (Line 6: Properties are only allowed within rules, directives, mixin includes, or other properties.)
my sass file is really simple by now as i try to play with it:
body
background-color: cadetblue
.circle
color: red
as i said when reaching the .circle i get the error. any ideas?
i used the sass --watch command and i use ruby devkit 2.6.5-1
thanks for helping! im new so i try my best
It seems like the syntax is not correct. Try this instead (remark the indentation on color property):
body
background-color: cadetblue
.circle
color: red
More info about Sass syntax : https://sass-lang.com/documentation/syntax#the-indented-syntax
I am using Magento 1.9 and I am trying to edit the background color of the megamenu.
I navigated all the way to the .scss file but found a $menu-background at the place of the color hex..
.main-menu {
position: relative;
top: 0;
width: 100%;
left: 0;
z-index: 99;
background-color: $menu-background;
&.isStuck {
z-index: 9990;
.nav .grid-full > li > a > span{
margin: 10px 30px;
}
.nav .grid-full > .parent > a > span:after{
top: 80%;
}
}
}
at the beginning of the same scss file there was
#import "../includes";
so I searched for that file and found:
#import "var";
in that last file I found:
// Accent Colors
$accent-color-1: #ee372a;
$accent-color-2: #000;
$accent-color-3: #fff;
//Menu
$menu-background: $accent-color-2;
$menu-item-color: #888888;
$menu-item-color-act: #ffffff;
$menu-item-bg-act: #232323;
I edited the accent color 2 as follows : (blue instead of black)
$accent-color-2: #00427A;
However now no matter how much I refresh the page , press CTRL + F5, flush the cache from magento -> System Cache Management. I cannot see the color changing to blue. I searched a lot but couldn't find a solution.
I then realized that the files i edited were scss files and not css (I have very low knowledge about scss files).
The big issue now is to convert edited scss files into css files.
I tried:
-scout
-koala
-npm sass
and in all cases the #import is failing and the css is messing up.
Is there a button to easily compile sass to css in magento or another way to do it that would not mess the css when it finds an #import?
Magento 1 has no built-in scss compiler. You will have to compile them manually or check if your theme has some built-in module for this task.
you can obtain a compiler from npm
npm install -g sass
or get standalone one
https://github.com/sass/dart-sass/releases
the compilation process is easy. just find the source scss and specify the target file
sass source/<file>.scss skin/frontend/<theme-name>/default/css/<file>.css
Try using thos documentations for enabling SCSS in magento:
https://www.gomage.com/magento-2-pwa/resources/magento-pwa-documentation/tutorials/enable-sass-less-support/
or try this one:
https://www.gomage.com/magento-2-pwa/resources/magento-pwa-documentation/tutorials/enable-sass-less-support/