I have loaded some custom CSS files inside styleUrls array in component hence CKEditor CSS file which is loading after all the custom CSS files is overwriting the custom CSS files. So how to load CKEditor CSS file after all the custom CSS files are loaded in Angular 9?
Related
I have website which is themable. the website has a theme editor which allows for dynamically change the website font. When the user selects a font, I want the font to be loaded dynamically from a css file.
The website is a static website using next export thus there's no next server in play.
when trying to load global css in runtime from the theme editor component i'm getting
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
But i cannot move the global css loading to the custom app file since i want to only load the fonts as needed (otherwise first load sucks).
using css modules doesn't seem like the right path since i need this to be applied globally.
The following SA question is similar, but the resolution there (moving css loading to custom app) is not valid in my case.
Next.js Global CSS cannot be imported from files other than your Custom <App>
What is the best way to achieve this?
We have styles.scss (base css file) and also providing option to load custom css url so custom can change their logo or colors...
Below is the requirement:
if custom URL is not available then it should load base css file
if custom URL loading is failed then it should load base css file
if custom URL is provided then it should load custom url and render the UI
I tried to option to add custom css in stylsheet in index.html but it is not loading as expected. I am getting base css is loading first and then custom css so i can see transition from base css to custom css.
how we can load only custom css when i have custom URL ?
Please let me know
Have you tried compiling it with the --aot flag?
If that doesn't work, you could use some type of semantic nomenclature (like maintainableCSS) so that you could just give different html class names to your elements so that they are only referenced by your component's css stylesheet instead of style.css
I'm trying to use PostCss with next.js which allow me only to add the main css file in the main _app.js file,
which make all the output style global,
how can I create css file for each page or even each component
As of Next.js version 9.2, it supports native css support.
As you said, if you import styles from _app.js file, they considered as global styles of your app.
Styles of components are considered "modules".
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.
All you need to do is call your css files with *.module.css suffix.
Check the official docs
The CSS stylesheets in my Django website are served as static files (so their URLs are constructed using the {% static %} template tag), but I find myself in need of importing a CSS file inside another CSS file, where Django template tags will not work.
Is there a way to dynamically populate the argument to #import inside a CSS file? Or will I have to just <link> the two files separately inside the HTML page?
I am trying to customize a theme of BigCommerce. The problem is this theme is using SASS (.scss) files instead of css. I have basic knowledge of SASS.
But I need to customize theme according to html template. In other word you can say I am trying to convert html template into a theme (free theme that is downloaded from market).
Issue there is that, html template is using CSS and theme uses .SCSS. So right now I am trying to find way to add css of template into theme.
Right now I am finding way to embed my css into theme and here are few things that I have tried
I tried to directly add CSS into .SCSS file like this
.header-logo-text{color:#ffffff!important;}
The above css code which I am typing in theme.scss file (just for testing purpose) to check whether writing css in .scss file will take any effect or not, But this way it didn't change font color!
In a second way I tried to add css in html tags using style like this
<div class="anyclass" style="background:red;">
This way its picking up css.
I have created online store on bigcommerce site and trying to customize from customize option oprovided by bigcommerce. Since I couldn't see any upload file option through which I can directly upload my css files into it, thats why trying to somehow add css in current files of theme either in html or in .scss.
And not a single css file is present in theme, how I can add my css into that theme?
SASS with the .scss syntax is a superset of CSS. That means valid CSS is automatically valid SASS (not in the other syntax .sass though). Of course you need to make sure you're SASS file gets compiled and included.
TL;DR: you can use CSS inside .scss files.