I have an internal library that has the colour variables, Im able to grab it from the node_modules and import it on any component basically, I have imported it in the styles.scss in hopes that the child components would inherit the variable making easy to use the colours.
the challenge that I'm facing is that I need to import the variables on every component before using them even though I have them imported on the styles.scss. I would like to be able to use the colors on any component basically have them imported globally and use all over the project
I have looked into this, (Angular SCSS Global Variable Import) similar question, but seems for every use you need to import which is what I don't wanna do
the (Global scss variables for Angular components without importing them everytime) first answer seem intriguing and I would like to use it in that sense, but my variables are like those of the second answer, please help
After a thorough google search and hair pulling, finally realised the only way to achieve what I'm looking for is to add my variables to the :root pseudo. this way I was able to import the variable once on my main styles and just use them throughout on any component level
Related
I am developing my own library of react components. I am using rollup to create the build. I also want to ship css along with it which i bundled into a single styles.css file. My concern is how a user would use it. They can simply import the components using import { Component1, Component2 } from 'my-library' but they are not styled by default. This can be solved by importing the css file: import 'my-library/build/styles.css' but i feel like this import is redundant, i want the css file to be included by default in my library index.js file. I am not sure how can i achieve this.
I am using rollup and rollup-plugin-postcss.
So my question is how do i do this? Should i use some rollup plugin? Is my idea right in the first place? Maybe i should leave it to the user to decide how they want it bundled because my approach forces them to use some loader for css files?
If you want to ship external styles (instead of e.g. a CSS-in-JS system such as Emotion), that "redundant import" way is the standard, exactly because you can't know how the user of your library wants the styles applied to their page, or which loader (or bundler!) they'd want to use.
It's also possible there's no document to inject styles into at all, in case your users are server-side-rendering your component to be hydrated on the client side.
I am using react-bootstrap and bootstrap in my nextjs project, thus I have to include the global css:
// _app.js
import 'bootstrap/dist/css/bootstrap.min.css';
The problem is that I load a lot of unused css in every page, thus google lighthouse diminishes my score.
I have tried to purge the unused css, and even thought the score increases, there are still unused styles. I do not need an alert, or a button everywhere. I would like to import only the styles I need in every specific page.
Is there a way to transform global css into css modules so I only import what I need? Maybe some webpack configuration or similar?
I can do it by myself manually splitting the bootstrap code into components. But I would like to know if there is any automatic way of doing it. So I do not have to go through this procedure for all my node_modules that need stylyng.
This is one of Bootstrap's cons — outside of eliminating modules from the core bootstrap.scss file and recompiling a unique version, there isn't a way to do this out of the box. (e.g., remove #import "accordion"; from bootstrap.scss to eliminate accordion styles)
In theory, you could compile each import as a separate .scss file and load the .css only when it's needed but there are some nuance interdependencies and would need consideration to ensure some code doesn't duplicate (e.g., variables, reboot, functions)
Inversely, you most likely are only using a few modules (grid.scss, spacing.scss, buttons.scss) and can eliminate all others.
I am trying to use two snippets as components from bootsnipp, and each snippet has its own css. i tried to put them both in the style.css, but it ended up damaging one component for the other to look fine.
I'm thinking about how to use both these styles.css, since in the index.js i can only import style.css.
can i use router to use multiple pages, and import style.css in the second page? but wouldn't that mean i'll have to use the second page as app.js, which is called only once in react? this is kind of confusing me.
EDIT: can I put the css of one component in another css file, and then import it INSIDE that component instead of index.js?
it doesn't bother me by the way whether i put that component inside index.js or not; in fact, I'm not going to use it there.
I would say you need to deal with the global namespace issue. You could create two components with its own css file.
Then add a unique className to stop collisions.
The benefit here is that you could also enable code spitting, so you would only load html/css/js when you need it (see React.lazy).
—-
By trying to load two styles in different times or manners you will still have the same issue of conflicting styles.
I am using styled-components in a React project. So far it has been working fine, but now I want to use the react-datepicker package, which requires its styles to be imported the following way:
import "react-datepicker/dist/react-datepicker.css";
However, importing the file causes an error that says "You may need an appropriate loader to handle this file type". I know I could fix this by creating a handler for .css files, but I thought I could avoid that by using Styled Components.
My question is, is there a way to handle these type of imports with styled components? I've been loooking online for hours and can't seem to find a way.
I ended up just forking the project and changing it to use styled-components instead of needing to import the styles.
I'm working on a React app. I have a few different stylesheets to restyle the same elements. Let's say for sake of this question I have two that have identical elements but different styles. Right now, in the app, I just import it with:
import './Stylesheet1.css';
What I'd like to do is, based on a setting for that customer in a database, it would switch to using ./Stylesheet2.css instead.
I know there are extra modules to include out there that may help and I could do things with dynamically building stylesheets and I may need to go to those options, but for now, I'd like to see if there is simply some way to dynamically swap out which CSS file I'm pointed to.
Well another way you can do this is as follow:
import style1 from './Stylesheet1.css';
import style2 from './Stylesheet1.css';