I have been learning CSS, SCSS, etc for a while and I like to use SCSS over regular CSS. BUT have just started to learn React and currently using styled-components.
Am I able to use SCSS and all the features e.g. variables, mixins within React web projects?
Or do I have to use a method of having an external compiled CSS file (from scss) and add it into the head of the HTML file?
Related
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
I want the capability to overwrite react-bootstrap (Sass) in a Next.js app. I have this working fine in React apps, but I've been unsuccessful getting it to work in Next.js. I don't want it set globally, set in _app.js, because I need it at the component level. Ideally, I'd like do something like this inside the somename.module.scss file:
#import '~bootstrap/scss/bootstrap';
And then below that, define my classnames to extend bootstrap classes, like this:
.goright {
#extend .text-right;
}
And if this isn't possible, is there another approach to achieve the same outcome with the Next framework?
As I learned more about the purpose of css modules, I realized that I was going about this all wrong. Next supports CSS-in-JS (styled-jsx), which provides most of the kind of customization I need to do.
I've just installed Bootstrap 4 to my Rails 6 app, and noticed that all files are .SCSS
Is there a way to make Bootstrap use Sass?
I use Sass, because it's much easier without all these brackets and semicolons...
There have been projects for past versions of Bootstrap to convert them to SASS syntax, (such as https://github.com/twbs/bootstrap-sass for Bootstrap 3) but I'm unaware of any such projects for Bootstrap 4.
Now I also use SASS over SCSS in my own projects, but what you need to remember is that it doesn't matter whether a library like Bootstrap uses SCSS or SASS. You can still write your own files in SASS syntax and import variables from SCSS files. That's the whole point of SASS/SCSS in general. Just write your files in SASS, and it doesn't matter whether or not Bootstrap is using SCSS.
Most of the tutorials and articles are using approach to import tailwind dependencies in styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
And then write custom styles with #apply function in custom-components.css or some separate file in global level.
But what if I want to use #apply function with tailwind in my component scoped styles? Is that possible?
Currently either my f.x. custom-component.css is polluted with different component styles, or component html is polluted with many classes.
BR
I used #ngneat/tailwind to add tailwindcss to my angular project and I could use #apply in my scss file of component.
However, it seems like nesting is not working all the time for me and, most important, dark variants is not working as well (here is the explanation).
Tailwind's documentation about components is to avoid using custom classes and just keep tailwind classes in the html if it's complex and only used in one component.
I am making an emberjs addon and have decided to use scss for styling.
I want to know how can I facilitate my scss styles to the app using my addon if it is not using scss but is just relying in pure css
More detail:
I have tested style in dummy app inside addon, I was able to import my style in dummy app by including #import 'addon/styles/addon.scss'; in tests/dummy/app/styles/app.scss as suggested here
But if I was to include my addon's style in app not using scss, what would be the steps?