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?
i have a folder filled with svg's (path: src/assets/icons).
The css function url() is implemented like this:
url("/assets/icons/CheckSmall.svg");
It finds the svg data, when I run ng serve.
But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg
I have read through many forums and discussions and tested a few things (One of many discussions).
For example i used different pathing "strategies":
1. url("^assets/icons/CheckSmall.svg")
2. url("~/assets/icons/CheckSmall.svg")
For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.
Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.
Try using the following syntax:
background-image: url('../../assets/icons/<file-name>')
Where the route is relative to the css file
If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it
Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders
I am using Storybook with a React project that also uses styled-components. Many of those style definitions access CSS variable values that are defined in :root in an index.css file at the root of the src directory. All of the CSS variables defined this way are just placeholders for colors. However, when the components are rendered in Storybook the values of the CSS variables aren't being accessed and so those colors never render/display.
Is there a way, either via a plugin or configuration, to make it so the CSS variables I am defining in my index.css file are accessible to the components when they are rendered in Storybook?
You can import CSS file in the .storybook/preview.js file:
import '../src/index.css';
// ... rest of the settings
This way it will be available across all pages in your Storybook.
I have a Rails 6 app set up to use Tailwind CSS with Webpacker similarly to how it's done in this GoRails tutorial.
I want to be able to change the Tailwind defaults dynamically based on the controller and action so that it's very easy for users to "skin" sections of the site by selecting a few options that then dynamically adjust a few of the Tailwind config options. (An example of how this could be used would be users logged into the admin area of the site changing their font family and background color to match their brand.)
I can't just add a stylesheet to the layout based on a conditional because I'd have to override all of the instances where a Tailwind css variable I want to change (like "sans-serif"). That would be a lot of work and brittle to maintain as Tailwind evolves.
It would be ideal if there was a way to dynamically insert choices selected by the user into the Tailwind config file (/javascript/stylesheets/tailwindcss-config.js), but I'm not sure how to do this.
Also is there a better way to do this in Rails when using Tailwind? It seems like there should be some way to use Javascript from the controller to dynamically change the settings in my tailwindcss-config.js (The Tailwind config file is explained here). So, something in that file like this:
theme: {
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphik', 'sans-serif'],
},
What was a font stack hard-coded as a configuration in Tailwind would become this:
theme: {
fontFamily: {
display: DYNAMICALLY INSERTED FONT STACK,
body: ANOTHER DYNAMICALLY INSERTED FONT STACK,
},
How would you do this in Rails? I have that Tailwind config file living at /javascript/stylesheets/tailwindcss-config.js. Is this possible to do with Webpack in rails? Is this even the correct approach to take with Rails 6 using Webpacker + Tailwind?
I have the feeling that we'd be trying to use a 'buildtime' tool for a 'runtime' operation
To directly inject the variable into tailwindcss config file would imply a rebuild of the actual css served to the user, applying the instructions in tailwind config file to the actual content put in app/javascript/css (assuming the setup used in the mentioned video tutorial).
The operation is carried on by webpack, integrated through the webpacker gem.
IMHO, neither webpack nor tailwind were designed with the purpose of rebuilding the assets at runtime, and, even if I'm definitely aware that a universal machine can do anything ;) I wonder where taking this route would take one, mainly in terms of maintainability.
From this link it seems that triggering a rebuild of webpack on a config change is not straightforward.
Here's a somewhat different path to try:
In the <head> section of the application define css variables (more precisely 'css custom properties') for the settings you want your user to access, which can be set and changed dynamically (from js too)
<style>
:root{
--display-font: "<%= display_font_families %>";
--body-font: "<%= body_font_families %>";
--link-color: "<%= link_color %>";
}
</style>
Alternatively you could create app/assets/stylesheets/root.css.erb (the extension is important) and include it in your template before tailwind
Then you should be able to change your tailwindcss config to something like the following:
theme: {
fontFamily: {
display: "var(--display-font)",
body: "var(--body-font)",
},
extend: {
colors: {
link: "var(--link-color)",
},
}
This way we define a dynamic css layout that responds to the value of css variables. The variables and the structure they act on reside on the same logical level, which corresponds to the actual webpage served to the user.
css variables are easily accessible from js, this is one way to have a clean access from rails too
Now let's imagine that the user wants to change the link color (applied to all the links).
In our imaginary settings form, she chooses an arbitrary color (in any css-valid format - the only constraint here is that it must be a valid css value, something you'll need to address with some form of input validation).
We'd likely want
a preview feature (client side/js): without reloading the page the user should be able to apply the new settings temporarily to the page. This can be done with a js call that sets the new value for the variable --link-color
// userSelectedColor is the result of a user's choice,
// say it's "#00FF00"
document.documentElement.style
.setProperty('--link-color', userSelectedColor);
as soon as this value is changed, all the classes previously created by tailwind, and any rule that make use of the variable, will reflect the change, no need to rebuild the css at all.
Please note that our user is not constrained to an arbitrary subset of the possible values, anything that can be accepted by css is fair game. By assigning to the config parameter a css variable, we actually have instructed tailwindcss to specify it in all its classes as a variable value, which now is under our control through css/js ...
We definitely DON'T NEED (nor want) webpack to rebuild the styles
To try to make it clearer, with our color example, in the generated css there will be classes like these - have a look at this link for an explanation of how customizing tailwind theme works
/* GENERATED BY TAILWIND - well, this or something very similar :) */
.text-link {
color: var(--link-color);
}
.bg-link{
background-color: var(--link-color);
}
/* .border-link { ... */
clearly the browser needs to know the value of --link-color (we've defined it in the :root section) and the value itself can be any valid css, but what interests us is that it can be changed anytime, automagically propagating the change to every rule using it, it's a css variable ...
and we'll want a save feature (server side/rails): when the user clicks on 'save', the new settings should be made persistent (saved in db)
this is plainly accomplished (for example) handling the form submit, saving the new value, which will then be pulled from the db to valorize the css variables on the next render of the page
just my 2 cents :) have fun !
As tailwind config file is "js" you can call ajax data then can add it in the config file data to make it dynamic. As we import the theme file in taiwlind config
I was having the same issue today. This worked for me.
# tailwind.config.js
theme: {
fontFamily: {
custom: ['Gilroy', 'sans-serif']
},
and use it like
#sample.html.erb
<span class="font-custom"> Hello Tailwind! </span>
Using Webpacker I can load css files and they get output in the stylesheet pack files, but sometimes I'd like to access the CSS in these files from within javascript for use say in a WYSIWYG editor's config (specifying some extra styles for the IFRAME). The other option is to be able to access the public path of a css file loaded in like so:
import froala_style from '../../../css/froala.css'
My suspicion is that it's to do with the css loader that comes with Webpacker. Its job is to load the css and compile it out to a seperate file. I think that one can't have two css loaders at the same time? Could the answer be to apply filters to a custom loader so that it takes effect on only the file I'm wanting to load in as text or the path?
One can override the existing loaders for a particular import like so:
import froala_style from '!css-loader!../../../css/froala.css'
Prepending the ! overrides existing loaders allowing us to specify our own. In this example one can call froala_style.toString() to receive the contents of the CSS file.
For reference: https://webpack.js.org/concepts/loaders/#inline