I have a web application with the back-end in node.js and front-end in react.js.
I have written the css using sass and am wondering if I am can somehow connect node and sass so that on request from the user (example font-size change) at the client-side a new css file can be generated and sent to the web application.
If this is possible that what module/library do i need to take a look at?
SCSS is a CSS precompiler. It's only use is to generate CSS when compiled. Write a simple syntax are generate the CSS for the browser to use it. Any use of SCSS other than this is not what it is made for.
Now coming to your use case, all you need is themeable CSS. If you need just the change in font-size or theme color, you don't even need an extra css. Explore CSS4 variables. Here is a very basic use of CSS4 for theming. https://dev.to/idoshamun/theming-with-css-variables-322f
Related
I found MS DOC about Css in razor. But it isn't work with Scss file.
I resolve this problem by creating two files: css and scss. And use sass --watch. But I need write this every time, when creating new component.
Unfortunately SASS is not supported for CSS Isolation feature of Blazor. At least, not at this moment.
In our project, we use CSS Isolation for the CSS component isolation feature, but we use SASS files to manage our theme, for style we want accros the application.
That being said, if you really need some SASS for an unique component, you totally can, by adding for example a wrapper with a specified id, and use this id in your scss file, with a dedicated name for it, for example MyComponent.scss.
In addition, I've found this article, but I preferred to not use it because it is a bit heavy to setup, but up to you: https://joren-thijs.medium.com/how-to-add-scss-support-to-blazor-cd2a62995441
You can use AspNetCore.SassCompiler which supports both normal and isolated scss. I believe it has a watch mode when using Blazor Server, WASM is not supported yet.
It can also do minification with source mapping.
For an organization I work for, there is a common stylesheet that all web applications are supposed to use.
For example, they expect some elements to be in thead.table-sortable th.table-sortable-sorted-down a:after to add a sorting icon. Now, in an Angular application, I use a component library (primeng) that has a simple element that just has the class .pi-sort-up for the same thing.
How can I map / copy /use part of the organization css into my application's css, to just copy the interesting stuff without requiring the complicated nesting on component (which I have no real control on anyway)?
We could use css, sass, or even dynamically generate css rules in javascript. I'd prefer avoiding changing the DOM at runtime for all matching components, as it could be quite dynamic.
EDIT: A build-time solution (e.g. with sass) isn't the preferred way, but could be acceptable if nothing else.
If the company style sheet is readonly for you, there is not much you can do at all. You will have to load the whole document wherever you need some parts of it. A possible "workaround" to avoid that would be to write a backend program (in PHP or node.js) which opens the company style document and looks only for a specific CSS rule which it then copies and pastes to some other style document.
However, this approach would be very dynamic as well and you needed to execute the backend script with each request, for the original company style sheet could change always... If your company could agree, you should use a preprocessor like SASS or LESS and define a structure for the company style, dividing it into several documents that can be loaded on purpose.
I'm using GWT in a new project that I'm working on and I'm facing a problem. Some of the CSS rules were defined into the XML file and not into a CSS file.
The problem is that when GWT compiles the code, my name classes defined into my XML file are changed to a new random ID.
Stuffs like GKA-VPPBPE or GKA-VPPBLE
Is there is a way to keep the original name instead of the generated ones?
The generation of obfuscated css classnames is a feature.
GWT has enabled CSS obfuscation activated by default. This will help reduce the download size and also reduce collision of css-classnames.
You can disable this in general:
<set-configuration-property name="CssResource.style" value="pretty"/>
Or for some classes only:
#external .myClassName
Look here for some more information
https://vcfvct.wordpress.com/2013/10/04/disable-obfuscation-in-gwt-css-resources/
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
In my project i have a lot of css styles. Some of them are never used (not anymore). I check this manually with eclipse: i select text and then with "Search -> Text -> Project" i can find, if this style occurs only in the stylesheet or also in java files. Is there better way to check, which styles are currently used in my GWT project?
edit:
#Igor,Keith: thanks for the hint, but i'm not using the CssResource to insert my css file. Instead i use my index.html. And i want to remove the unused styles just for better overview. CssResource is not exactly, what i'm looking for.
If you use CssResource to inject your css file, GWT will handle pruning unused styles for you (just like it does in the case of unused code). It will also by default obfuscate it, so watch out for that. For a comprehensive explanation see the docs.
CssResource works best in combination with UiBinder. I'd recommend both - you even get cool features like compilation-time errors when you are missing a CSS style in your UiBinder xml files (or you misspelled it), among other cool/awesome things - again, check the docs for the full list.
GWT 2.0 added a feature called ClientBundle, which is a generic mechanism for bundling resource files such as images and CSS. If you bundle CSS files with ClientBundle (via the CssResource class), the GWT compiler can actually generate errors on unused CSS selectors.
The documentation is a bit rough, but here is the relevant part of the GWT docs:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Strict_scoping
In addition to detecting missing selectors, CssResource also supplements CSS itself, letting you use constants and conditionals within your CSS, even allowing you to specify different styles depending on which browser is being used. It also provides obfuscation and minification, among other things.
I'm still looking for a better solution. To solve the problem i've used the linux terminal instead eclipse for the search and that was faster.