Menu
I'm new to GatsbyJS and have been combing the documentation for a solution, but can't seem to find one, which makes me think that I'm missing some larger piece. I assumed the way to eliminate browser-default styling would be to import some sort of a css-reset.css file in my index layout and overwrite it with my own styles, along these lines:
import React from 'react';
import reset from './reset.module.css';
import styles from './index.module.css';
but I can't seem to overwrite them this way (only the reset is implemented). Is there something fundamental about GatsbyJS's build process that I'm missing here? Something I need to integrate into the gatsby-config file? Is there a plugin that does this/a better means of achieving the CSS reset? Thanks for the help.
739
This project setup uses PostCSS Normalize for adding a CSS Reset. To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed.
A reset stylesheet (or CSS reset) is a collection of CSS rules used to clear the browser's default formatting of HTML elements, removing potential inconsistencies between different browsers.
No. I actually think it never has been necessary. But a CSS reset will help you to make your project look the same in every browser and might save you a lot of time of browser-testing and debugging.
Gatsby extends import so you can import CSS files directly into your components. Gatsby automatically concatenates and minifies CSS and inlines them into the <head> of your HTML files for the fastest possible page load time.
Gatsby extends import so you can import CSS files directly into your components. Gatsby automatically concatenates and minifies CSS and inlines them into the <head> of your HTML files for the fastest possible page load time. CSS files with global styles like typography and colors are typically imported into the site’s gatsby-browser.js file.
This approach can simplify integration of CSS or Sass styles into your Gatsby site by allowing team members to write and consume more traditional, class-based CSS. However, there are trade-offs that must be considered with regards to web performance and the lack of dead code elimination.
Works out-of-the-box with Gatsby. CSS-in-JS: locally-scoped CSS written and consumed in JavaScript, enabling the easier use of dynamic styling and other features. Requires the use of third-party libraries.
NOTE: This pattern is implemented by default in the default starter. To create a shared layout with global styles, start by creating a new Gatsby site with the hello world starter. Open your new site in your code editor and create a new directory at /src/components.
You can import a reset/normalize/other global css imports using gatsby-browser.js. If you have a layout component for consistent theme, you can also import it there as well.
Do this to just include the stylesheet:
import '../styles/myGlobalStyle.css';
There's no need to assign the import to a variable, so do not do this:
import globalStyles from '../styles/myGlobalStyle.css';
For instance, using normalize.css in gatsby-browser.js (v2):
import React from 'react';
import { Provider } from './src/components/Context';
// This next line is all you need to import global styles
import 'normalize.css/normalize.css';
export const wrapRootElement = ({ element }) => {
const ConnectedRootElement = <Provider>{element}</Provider>;
return ConnectedRootElement;
};
As an alternative to importing CSS Modules, you can simply import css-reset.css as you first described.
Following the example of the default Gatsby starter, you can place your stylesheets in /layouts and then import them in /layouts/index.js like this:
import ./reset.css
import ./index.css
This will apply your styles globally for you.
Another option with Gatsby is to use Typography.js and apply your global reset styles via the overrideStyles setting.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
