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?
Related
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
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.
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";