I am working on custom styles for my Spartacus application and struggling with the order of the CSS rendered. Despite the order of imports in my styles.scss, my custom CSS rules are rendered in the middle of Spartacus default styling, forcing me to bump up the specificity of my rules to achieve desired results.
This is my styles.scss:
$styleVersion: 4.3;
#import '~#spartacus/styles';
#import './styles/custom/_index';
/* custom/_index.scss contains further imports of the actual styling */
and this is the snippet of the rendered CSS:
/* Spartacus defaults
...
*/
cx-wish-list-item .cx-return-button .btn-link:hover {
text-decoration: underline;
}
/* My custom code */
header .SiteLogo {
width: auto;
max-width: 150px;
}
/* Spartacus defaults continued */
cx-bulk-pricing-table table {
text-align: center;
}
/*
...
*/
Working with Spartacus 4.3 and Angular 12. My objective is to:
keep my custom code as simple and low-specificity as possible
be able to leverage Bootstrap and Spartacus variables and mixins in my SCSS
Is there a way to ensure my custom styles are rendered last, according to the imports order?
In the documentation they mention wrapping custom styles in the body tag in style.scss.
link here
Try wrapping your scss in the body tag. This worked for me.
body {
cx-wish-list-item .cx-return-button .btn-link:hover {
text-decoration: underline;
}
/* My custom code */
header .SiteLogo {
// width: auto;
width: 150px;
}
/* Spartacus defaults continued */
cx-bulk-pricing-table table {
text-align: center;
}
}
In order to control the order of styles, it is better to import the styles by yourself.
First, check the angular.json file (as there might be other Spartacus related style files) and keep only one styles file there:
"styles": [
"src/styles.scss"
],
Then, in styles file import all other styles in required order, e.g.:
#import '~#spartacus/styles/index';
#import './styles/custom/_index';
Related
I have a file global.css in assets folder, file is imported in main.js. Styles from this file works only if i dont have same style applied in component style. For example, in component i have this
h1 {
font-size: 50px;
}
then in global.css
h1 {
font-size: 35px
}
this won't work. Is there a way to override component styles with this global.css?
Make sure your style tag within component has scoped attribute otherwise it'll override global styles.
Review: https://codesandbox.io/s/vue-basic-demo-j87nz0?file=/src/components/HelloWorld.vue
You need to look into CSS specificity to solve this issue.
Here, it's happening because the global style is applied at first, then component style comes in second, you could inspect that in your devtools and see various declarations applied to your h1 element.
There are of course advanced possibilities in CSS but writing something more specific
h1.my-cool-class { /* or just .my-cool-class */
font-size: 50px;
}
should be enough here.
You can use h1 { font-size: 35px !important; }
Or with classes
For example:
.headline-h1 {
font-size: 35px
}
Thank you everyone for answering. I had to deal with some messy css, every component had its own css style for every heading and paragraph(sizes, colors, fonts, etc.). I deleted all of these and put them in global.css file and then changed html elements to be compatible with sizes. That's it.
i added my theme as jar as described by the documentation.
now i want to add a menu-bar with a single entry for a user-menu.
But i have some trouble to create a custom css.
in the theme i import my base.css
#import url('./base.css');
#import url('lumo-css-framework/all-classes.css');
all styles are loaded, fine :)
then i add the shadow-tree css in my base.css
/* working */
vaadin-menu-bar{
border-radius: 0px;
background: aqua;
}
/* not working */
vaadin-menu-bar-button{
border-radius: 0px;
background: red;
}
/* not working */
vaadin-menu-bar [part="menu-bar-button"]{
background: yellow;
}
https://vaadin.com/docs/v14/flow/styling/styling-components
may be i did understand something wrong. Any help would great :)
so while using a JAR for the theme and the css belongs in
resource/META-INF/resources/themes/mytheme/base.css
i can use
vaadin-menu-bar.usermenu::part(menu-bar-button){
border-radius: var(--lumo-border-radius-m);
}
to set my custom style to the menubar with classname 'usermenu'
I'm having trouble understanding how exactly I should build sites with CSS. I get that each component has it's own CSS, but should I do this with every component? What if the components are huge with a lot of CSS?
I've looked at some sites that were built with vue.js and they have external CSS files such as a app.css file with a ton of internal style blocks.
I'm use to building sites with Sass in it's own /styles directory and having compass.app compile those .scss files into .css files.
Here's an example of a component css block:
<style lang="scss">
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
a {
color: red;
}
}
</style>
What if that was a thousand+ lines? Would I move that into an external scss file and if so, how? How does this all work?
Thanks.
If you concern is about code separation you can have custom CSS code in a component and add a scoped attribute so the styles you are writing there would only apply to that component:
<style lang="scss" scoped>
/* your scoped css rules here will only apply to this component */
</style>
Now if you also want to compile the CSS from all of your components and merge them into a single final CSS file that you would link from your main HTML file then you need to add a bundler/compiler such as webpack
You can also take a look at vue css-loader to understand how to modularize and compose your CSS rules.
My main.scss file is as:
#import "components/variables.scss"; // This file contains all font variables etc
#import "components/global.scss"; // This file contains global styles to be applied
#import "components/header.scss"; // All header and top menu navigation
#import "components/bslider.scss"; // The main middle slider that have whole content of webside as slides.
I have added newlines after each #import statement but when the output is generated there is no space in between css of individual files. The output is like this:
* {
font-size: 14px;
}
/*global css finishes*/
/*header css starts*/
header {
position: absolute;
}
But I want newlines like this:
* {
font-size: 14px;
}
/*global css finishes*/
/*header css starts*/
header {
position: absolute;
}
I am using yeoman webapp generator to convert sass into css. Any help will be appreciated, thanks.
I haven't used yeoman , but you can change the style of the css that is output
sass --watch yourfile.scss:style.css --style expanded
You can read more on SASS styles here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
I am using ckeditor and divarea plugin so that I can use ckeditor in div not in iframe.
So the ckeditor can inherit the page's css style.
Now I want set the style of ckeditor's content.
One solution is like this:
.cke_contents h1 {
font-size: 32px;
/* custom styles */
}
.cke_contents p {
font-size: 12px;
/* custom styles */
}
I'm afraid this may cause other issues. So what I'm thinking is to set a class name so that
I can set custom styles freely. like this:
<textarea id="ckeTextblock"></textarea>
<script>
CKEDITOR.replace("ckeTextblock", {
extraPlugins: 'divarea',
bodyClass: 'customClassName'
})
</script>
.customClassName h1 {
font-size: 32px;
/* custom styles */
}
.customClassName p {
font-size: 12px;
/* custom styles */
}
That I have tried the "bodyClass" config, but it not worked in divarea.
Anyone has any idea? Thanks!
Finally, because use divarea, the ckeditor inherit the page's css, so I use this css override like this in my page's scss:
#cke_richTextArea .cke_wysiwyg_div {
padding: 15px;
h1 {
// custom it.
}
p {
// custom it.
}
}
And another thing about the ckeditor "Format" drop down menu style(like h1, p etc.), I can copy and custom a new skin and modify the editor.css and editor_*.css is okay.