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";
Related
I have created file index.scss in which im importing mixins and variables and then importing it in App.tsx Problem is im also using css-modules and variables imported in App.tsx are undefined in other components. Is there a way to share index.scss globally without importing it in every single scss file?
I use React, scss.
I have main scss file with mixins, variables, extends etc. Currently if i want use mixins or variable i need to #import './global.scss'; in each component directly where i want to use it. But most of the time i need these styles in almost all components global.scss.
How i can make global.scss visible for all components without repeating import in each component directly?
Thanks.
there is no such possibility in sass.
The solutions are:
The first and the easiest:
Just include #import in all sass files, it is not bad practice as you will always have control of all vars that are imported in each file in your app.
The second
While building you app via webpack you can find all sass files(that are not started with underscore) in your project and include you import in it.
I would like to create mixin functions and use global variables from a global SCSS file without the needs of import the file for every SCSS file i am using.
I know that I can import a global SCSS file to every SCSS file manually and then yo use that "global" mixn but I don't want that the developer will have to remember to add it manually every time he is creating a new SCSS file.
I need a solution for reactjs.
You just need to import your global.scss that contain global variables to the project parent directory, in react's boiler plate it's the App.js.
You may now use those scss variables to any scss components without importing the global.scss everytime.
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.
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.