I want to use page specific styles such as contact.css (compiled) applied only to i.e. Contacts page.
I have a screen.css compiled which imports the _base.css that contains global variables, custom mixins, classes, etc., but the trouble is that I cannot use contact.css style if it contains global variables from _base.css — even with the screen.css set before contact.css (link) it always outputs error. And if I import the variables into the contact.scss itself I then get duplicate styles.
What should I do, how can I target a specific page and retain global variables in Sass?
Thanks.
Create _globalvariables.scss and import that where you need it, including _base.scss.
For your screen.scss (or whatever), import _base.scss, for sheets such as contact.scss that only need the variables, only import in _globalvariables.scss.
In other words, keep your mixins and variables in a sheet without anything that will be compiled to CSS directly, so you can import it where you want without having to deal with duplicate style declarations.
Related
I'm using customize-cra as suggested by antd documentation to be able to customize the theme and it works fine.
I can access less variables from antd theme by importing the index in my less files and it works fine.
I can use the old fashioned css modules to style my components by defining files with .module.css and it works fine.
However, I would like to import and use the antd theme less variables in my css modules and I can't figure out how to make it work. Does anybody know how it can be achieved?
I am able to use the variables if I import antd.less at the top of the whatevercomponent.less file:
#import 'antd/dist/antd.less';
The documentation states that that component styles can be skipped
Skipping Specific Component Styles
Component styles are optional, because they are pulled in from the style library. Therefore, you might want to disable some standard component styles entirely. To disable standard component styles, you can add the component selectors to the $skipComponentStyles list. The following is an example that demonstrates skipping two standard components from the style library:
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
Skipping specific component styles might be beneficial if you need to create styles from scratch and do not want to override specific style rules coming from the Spartacus style library.
Where should this be done? I can't get that from the documentation. My first guess should be the global style.scss but for example the following does not work:
#import '~#spartacus/styles/index';
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
You're almost right, you just need to swap the 2 lines. The sass variable will be used inside the import of the Spartacus styles, otherwise the variable defaults to an empty var. so, the following will work:
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
#import '~#spartacus/styles/index';
I am using less css in my vue components.
Some of my components require the use of '>>>' deep selector for elements that I add programatically. However I get 'Unrecognised input' error when I do so.
I want to use less syntax to import variable for colors, font-size, etc. to keep those core variable in one file and use them in all of my components.
Is there a workaround for this?
Thanks
As described here in the Vue Loader docs, if your preprocessor does not allow >>> you can use ::v-deep, which should be ignored by the preprocessor because it is syntactically valid CSS.
I have some method to generate random hexademical color. It will be used in very few (3 or 5) parts of the project. So I want to separate it from main code into some kind of Helper or smth else, and include it when needed (not globally).
I have 2 working ways to do this:
Using mixins. What I don't like is that when you read the code, you can't separate your own methods from methods of mixin.
Using plugins. What I don't like with that is that you have to write import Vue from 'vue' + Vue.use(MyPlugin) every time in all files where you want to use it. After that, you can call it like this.$ColorHelper.getRandomHEX().
So, the question is about aesthetics visualization.
What is the best practices to do such things?
PS: project was created from template with webpack.
Our team decide use function import from files-helpers
For example:
import { getRandomColor, getBackgroundColor } from 'Global/helpers/colorHelper';
// .....
let color = getRandomColor();
What good:
Don't need use excess import + use as in plugins
Method visually stands out, what it not from this
What bad:
Cant see visually what the helper have method. But possible can fixed with aliases. We dont think yet
Vue plugins are global, you only have to call the Vue.use method once. Then they should work wherever you use that particular Vue instance.
In a default project setup you normally don't have multiple Vue instance so it should work globally.
From the docs:
Plugins usually add global-level functionality to Vue.
And:
Use plugins by calling the Vue.use() global method:
Vue.use(MyPlugin)
https://v2.vuejs.org/v2/guide/plugins.html
#seven-phases-max I have refactored my code a few times based mostly on your answers to my stackoverflow.com posts but would like to get your feedback to my latest and hopefully final variation:
Ultimately I ended up using :extend to get copies of css properties of styles not under my control:
Below is example of approach I've used in several places create css from base css/less selectors defined in less files outside of my control and optionally over-ridden in another less file outside my control:
.CODE-COLORING-ICON {opacity: 0.0};
Below code works works with and w/o above css / mixin line
.CodeMirror-gutters:before,
.CodeMirror-gutters:hover:after {
&:extend(.CODE-COLORING-ICON);
}
In other places, I created created empty selectors fearing less would not like an extend like above with ".CODE-COLORING-ICON" not defined. I was surprised the above code worked.
The end game is to merge css from theme with override values from another file.