Gutenberg styles
This package includes the style.css and theme.css files from Gutenberg.
How does it work?
- Simply import the styles in your project.
Installation
- Do
npm install @aamodtgroup/gutenberg-styles
in the root of your project.
Use
SCSS utulities and variables
In your application's SCSS file, include styles like so:
@import 'node_modules/@aamodtgroup/gutenberg-styles/style.css';
@import 'node_modules/@aamodtgroup/gutenberg-styles/theme.css';
If you use Webpack for your SCSS pipeline, you can use ~
to resolve to node_modules
:
@import '~@aamodtgroup/gutenberg-styles/style.css';
@import '~@aamodtgroup/gutenberg-styles/theme.css';
To make that work with sass or node-sass NPM modules without Webpack, you'd have to use includePaths option:
{
"includePaths": [ "node_modules" ]
}
Import with
Add the following in your index.html / main.html - whichever is your main loading html. Make sure the path to your node_modules folder is correct.
<link rel="stylesheet" type="text/css" href="./node_modules/@aamodtgroup/gutenberg-styles/style.css">
<link rel="stylesheet" type="text/css" href="./node_modules/@aamodtgroup/gutenberg-styles/theme.css">
Next js
Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.
For global stylesheets, you should import the file inside pages/_app.js
. For example:
// pages/_app.js
import '@aamodtgroup/gutenberg-styles/style.css'
import '@aamodtgroup/gutenberg-styles/theme.css'
Authors
- Kasper Aamodt - Owner and developer @aamodtgroup