I am trying to use some SCSS variables/fonts in a Gatsby project which uses CSS modules. Currently my project structure looks like this:
src
├── components
├── Footer
├── footer.module.scss
├── index.js
├── Header
├── header.module.scss
├── index.js
├── Layout.js
├── layout.module.scss
├── pages
├── index.js
├── styles
├── _typography.module.scss
├── _variables.module.scss
Gatsby's docs recommend putting global styles into a Layout component (containing the header & footer) and then wrapping this around all other components. This works fine for the styles contained within the layout.module.scss file, but if I import the _variables.module.scss into this file, then I cannot use the variables in other SCSS files (for example header.module.scss).
What is the best way to structure my application so that I can access global variables/fonts in my modules? Do I just need to import the partial files into all of the individual modules when needed?
Thank you!
You have multiple approaches. I think the best and straightforward approach is importing the partial files (variables, functions, mixins, etc) into each individual module when needed since it would be a dependency of that specific file (it makes structural sense).
If your system and modules are properly structured, webpack will tree shake your SCSS modules and will remove the dead-code so you don't need to worry about importing the same file (let's say _variables.module.scss) into each specific module.
Related
I have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:
Both projects import TailwindCSS standardly in their index.css files which is then imported into index.tsx using import "./index.css";:
The host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)
The component looks correct on storybook:
Host app:
Looking for advice on how to correctly import the component library within the host app?
UPDATE:
I've figured that the component library generates it's own TailwindCSS classes as expected and that's where the "duplicate" classes (inline) come from and it's being included in a single output in index.js in the dist folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate .css file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.
After reading more on the TailwindCSS documentation, I've found a resolution. Using the following information from https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries, I was able to fix my issues.
Essentially what I've now done is, on my component library, I ensured that the.css styles are extracted into it's own file and not built into a single index.js. After that, on the host app, I set the content of tailwind config to reference my component library so that it scans the src and generates those classes itself.
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
Currently I use sass, images, and jsx files and I would like to know if there is a standard.
For example, currently I'm doing this:
"/src
/components
App.jsx
App.scss
/Header
Header.jsx
Header.scss
/utils
index.js"
In my App.jsx (Example importations)
import Header from './Header.jsx
import appSass from './App.scss'
There are many ways good practices in organizing your files, I am currently going through a coding bootcamp and they showed us this process of organization:
/src
/components
/app
index.js
app.scss
/header
index.js
index.scss
/lib
util.js
/style
main.scss
_reset.scss
_vars.scss
_layout.scss
_base.scss
main.js
In your main.js you can import your app component with:
import App from './component/app'
and in your app.js (and other components) you will can import using:
import Header from './header'
I found this a nice way to keep things organize and makes your imports more uniformed where you aren't trying to figure out which directory level you are storing each component.
It also is a good way to organize sass files, inside the style directory you have all your sass files that has to do with the styling of your overall app. main.scss imports the other files and dictates which scss you want applied first (usually a reset/normalize). Each component directory will also contain a sass file that will dictate the styling for that single component.
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";