my question is little subjective.
so the scenario is like- I have n numbers of react components. Each
components have its respective css file. There are few common css files which are inside
assets/css/ files. I am simply importing common css file to my react component css file if needed.
for Example:-
There is a assets/css/color.css file which is common and used by few of components. I am importing assets/css/color.css to those css files which needs it. This way I am importing assets/css/color.css many times to different css files.
My question is- When webpack starts bundling the code how does it handle multiple import of same css file? Does importing same css files at many places leads to redundancy in bundle file?
The answer given by How does webpack handle multiple files importing the same module React imply that webpack will only bundle each library only once.
That's true for JS modules. Each module is embeded only once and webpack reuse the instance where appropriate.
However if you include another file inside that file, then it's up to how the css webpack module manage it.
For raw CSS, I think the file will get included only once as all is managed directly by webpack.
However if you use the sass loader and import some other sass file from your first sass file like that:
1.js File -> includes a.sass file -> #import another.sass file
2.js File -> includes b.sass file -> #import another.sass file
Then if another.sass file generate some classes definition, you'll see that these classes appear multiple times in the output. This is because webpack doesn't know about the duplication because it's handled at the sass loader level.
Related
since i want a unique CSS file for a specific component i decided to use CSS module file
but i noticed the import of CSS file of a library that im using called react-image-gallery doesn't work anymore
#import "~react-image-gallery/styles/css/image-gallery.css";
knowing that it worked on normal CSS file but not on css.module file
how can i fix it?
I'm working on a project where I want to use scss with react.
The Problem
I'm using 3 global style files, and 1 separate scss file for each component, but they seem to apply styles that I didn't even import.
File structure
This is my doubt. Your Sass files are converted to CSS file and in react if you use CSS files imported as import './somecss.css', your styles will leak out to other components. That's why they introduced CSS modules. If you are using CSS modules, there is a difference how you apply it. It's not like how a regular CSS class/id is applied.
CSS Modules let you use the same CSS class name in different files
without worrying about naming clashes.
You can get more info from docs
In a React app, we usually import CSS files into the JavaScript components.
I thought this way we inject the CSS into the final JavaScript build.
However, it seems that React (at least create-react-app) still generates separate CSS files.
Why is that?
Is there any way to force CSS stylings to be part of the final r? Kind of CSS-In-JS?
You should eject the create-react-app and change webpack config file (style-loader similar question) to not create separate file for css bundle or use html-inline-css-webpack-plugin.
This is my current project directory structure, as I couldn't think of a better way of organizing for the use case that every component has it's own .scss file, however, the entire app are fed themes which include a global variables.scss file. Currently, I'm importing the variables.scss file at the top of every component's .scss file and I'm wondering what the best practices are for this sort of workflow.
/ app
/ components
/ Navigation
- Navigation.js
- Navigation.scss
/ styles
- globals.scss
- variables.scss
- main.scss
My main.scss file basically #import all .scss in its directory (e.g. variables.scss, globals.scss, etc.), however, I need to the following to have access to variables inside of each component:
// Navigation.scss
#import '../../styles/variables.scss
.class { ... }
I understand I could also import all component .scss files inside of the main.scss directory but that defeats the purpose of having css modules and being able to import them at component level for name spacing, etc.
It is possible but I don't recommend it.
Dependencies
Every component has it's dependencies. You have to require several dependencies in each Sass (ES6/React.js) module. That's how Webpack resolves dependencies.
I recommend add an resolve path to Webpack / Sass config and import the variables file in each Sass module.
I'm having a difficult time figuring out how I can access Sass variables within a React component's sass file import. Here's my current directory structure, where I'm using Webpack to bundle everything:
components/
Sample/
Sample.jsx
Sample.scss
sass/
main.scss
variables.scss
Inside of Sample.jsx, I am importing Sample.sccs, however, the variables from variables.scss are not coming through, as I assume since they are separate modules, they don't share the same context?
I understand that I could fix this by simple not requiring the styles within the components's .jsx file but rather just import them all individually within main.scss, so they share the same context, but it would be nice to keep everything encapsulated.
You need to import variables.scss in the components/Sample/Sample.scss file.
Add the following at the top of components/Sample/Sample.scss file:
#import "../../../sass/variables.scss";