I'm using less-loader to load less into css.
Then I use typings-for-css-modules-loader to get class name constants in TypeScript.
The problem is that I develop raw markup at first. During developing of mark-up I create empty rulesets in LESS to get class name constants and use them in mark-up. But because LESS ignores empty rulesets constants are not generated.
When I add any styles into ruleset constants are generated properly.
For example:
.tooltip { // constant "tooltip" is generated
display: none;
&__name { // constant "tooltipName" is generated
color: inherit;
}
&__id { // constant "tooltipId" is NOT generated
}
}
I can add some dummy styles into every new ruleset but it would be annoying.
I use WebPack, ReactJS and TypeScript.
I'm looking for some config I can use in webpack.config to change this behavior.
I figured out that it is behavior of less package not less-loader.
There is a feature request to implement possibility of keeping empty rulesets:
https://github.com/less/less.js/issues/1006
There is also one more clever way to keep empty rulesets in output.
Just add empty (or not) comment inside of it:
.tooltip__id { // constant "tooltipId" IS generated
/**/
}
Related
How can I override some default values from primereact e.g. the primary color?
I read that i have to override the values by adding the following code in the proviced override.scss
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
Unfortunately, my changes are not applied when working with e.g. a button-class (which is working with the primary color). I also read that the overrides must happen before the actual class is created.
How can I do that? Do I need to run a SCSS-command?
In my remember, You can override variables in overrides/_layout_variables.scss or overrides/_theme_variables.scss files. Also you may need to upgrade your version to the latest.
You can override variable for some more specific rule
e.g.
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
.somePage {
--primaryColor: blue;
// So primaryColor will be blue for all rules in scope of .somePage
}
Well to overwrite SCSS/SASS/LESS variables in general you could do the following (The process does also work with less instead of .scss)
Create a new .scss file
Instead of directly including the frameworks (doesnt matter which one you use) .scss include your OWN created .scss file (step 1)
Import the framework's .scss file in your own, custom .scss file
Compile your own .scss file using e.g. node-sass
Example of your own .scss file
#import "node_modules/path_to_the_libaries_scss_file.scss";
// Overwrite colors like this:
$primary-color: #ff5b00;
My company is running Wagtail as a headless API, using it more as a way to store bits of content rather than entire pages. As such there's the occasional feature that doesn't make sense for us. In this case it's the "internal link" feature. Since we don't manage "pages" per se I'd like to remove this option from the chooser found on the rich text field, as seen below.
I've identified several admin templates which could be overridden to remove this functionality, but I wanted to first see if there's something which can simply disable this "internal link" option so that it just doesn't even show up.
The _link_types.html template would allow me to remove Internal Link as a choice, but it appears Wagtail defaults to Internal Link which means that even if the option is gone, the Internal Link chooser still shows up. Barring a simple option that can be toggled off, where should I be looking to default selection to External Link?
Below is an approach, it kind of feels a bit hacky and it would be great if there was a more natural way to do this but hopefully this helps.
See the documentation for an explanation of the Wagtail Hooks.
Step 1 - hide the internal link option
Use the hook insert_editor_css to inject some css to 'hide' the first link.
This achieves the same goal as the _link_types template override you have attempted but 'scopes' this to the editor modal only.
This is important as you want to avoid breaking the 'move page' and scenarios where the page chooser will be shown. The css feels a bit hacky but hopefully gets the job done.
Step 2 - override the internal link option to external link for modals
Use the hook insert_editor_js to override the window.chooserUrls.pageChooser value, this will again be on the editor page only & for the modals only.
Set this value to the new 'default' you want, in the code below we have set this to the external link option.
You can see how these values are set globally in the editor_js.html template.
Code
# file: wagtail_hooks.py
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html
from django.urls import reverse
from wagtail.core import hooks
#hooks.register('insert_editor_css')
def editor_css():
"""Add /static/css/admin.css to the admin."""
return format_html(
'<link rel="stylesheet" href="{}">',
static("css/admin.css")
)
#hooks.register('insert_editor_js')
def editor_js():
return format_html(
"""
<script>
window.chooserUrls.pageChooser = '{}';
</script>
""",
reverse('wagtailadmin_choose_page_external_link')
)
/* file: static/css/admin.css */
.modal-content .link-types :first-child {
/* hide the 'internal' link option from the page chooser */
display: none;
}
.modal-content .link-types {
/* ensure the 'before' element can be positioned absolute */
position: relative;
}
.modal-content .link-types::before {
/* hide the left '|' bar */
background: white;
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
width: 5px;
}
I have tried to to that using this line of code but it doesn't work
#import url("Javascriptfile.js");
and <script type="text/javascript" src="Script.js">
these two ways doesn't work.
in js file I have
export const PrimaryColor = "#4267B2";
and I want to import it in my css file how can i do it?
I do not believe this is possible in any way.
You can manipulate CSS with JavaScript to a certain extent, but it is mostly done through DOM manipulation (acting on class names) or generating CSS programmatically (but it is still CSS in the end).
I don't think it is ever possible to access "JavaScript world" from the scope of CSS.
However, if you want to use variable names in CSS to reference constants, like colors, sizes, etc., you can use the CSS custom properties feature : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.
App.js
{
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}
ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:
App.js
changeColor(e){
this.setState({primary:e.target.value}) // the value is updated to #ffffff
}
Now, I need to pass this.props.primary to .scss something like:
variables.scss
$primary:this.props.primary
login.scss
.btn{
background-color:$primary
}
my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them
We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?
something like this
https://vuetifyjs.com/en/style/theme
vuejs uses theme thats overides to scss variables
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
}
})
can anyone please explain me how they r doing I'm not understanding
First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".
The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in #media) and about support in browsers.
I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using
$css-vars-use-native: true;
you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later
Then your code will be able to override any of custom properties as easy as
document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)
Take a look into fine and short article on how to change custom properties with JS
NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:
document.querySelector('#previewBlock').style.setProperty(....);
I would use Styled Components instead. There you can pass your styling by props
https://www.styled-components.com/docs/advanced
The header has a navigation menu I'd prefer to keep, but it's taking up too much space. What can I do to make it look good on mobile?
One possibility is to use togglers - buttons that make its inner content appear/disappear. The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation. It also does that unobtrusively.
You will need to include the uranium js file, so you can just use it. Then, you can do it as explained below.
You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. To identify each of those parts, use these data attributes:
data-ur-set="toggler"
(add this attribute to the wrapper)
data-ur-toggler-component="button"
(add this attribute to the "button" section)
data-ur-toggler-component="content"
(add this attribute to the content section)
You need to include these CSS rules somewhere too:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Both the Bloomingdales and the Macys mobile sites use that approach. You can see it working there.