Hello!
I am having a hard time setting up Custom Previews in the Netlify CMS Admin page. My styles render correctly on the site but not in the editor. Here are the relevant files I have set up.
Netlify CMS plugin in gatsby-config.js
module.exports = {
siteMetadata: {
title: `Ohmni Template`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
siteUrl: 'https://example.com',
image: 'https://lengstorf.com/images/jason-lengstorf.jpg',
author: `@gatsbyjs`,
organization: {
name: 'Example, Inc.',
url: 'https://example.com',
logo: 'https://lengstorf.com/android-chrome-512x512.png',
},
social: {
twitter: '@jlengstorf',
fbAppID: '',
},
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `content`,
path: `${__dirname}/content/`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 2048,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
},
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
stylesPath: `${__dirname}/src/global.scss`
},
},
`gatsby-plugin-offline`,
"gatsby-plugin-netlify",
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
cms.js file, I only have the index page because that is what I am testing.
import CMS from 'netlify-cms-app'
import IndexPagePreview from './preview-templates/IndexPagePreview'
CMS.registerPreviewTemplate('index', IndexPagePreview)
Not sure if my page.json file will help but here it is.
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"codemirror": "^5.52.0",
"gatsby": "^2.19.22",
"gatsby-cli": "^2.9.0",
"gatsby-image": "^2.2.41",
"gatsby-plugin-manifest": "^2.2.42",
"gatsby-plugin-netlify": "^2.1.33",
"gatsby-plugin-netlify-cms": "^4.2.1",
"gatsby-plugin-offline": "^3.0.35",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-sass": "^2.1.29",
"gatsby-plugin-sharp": "^2.4.5",
"gatsby-plugin-typography": "^2.3.22",
"gatsby-remark-copy-images": "^0.2.1",
"gatsby-remark-copy-linked-files": "^2.1.37",
"gatsby-remark-images": "^3.1.44",
"gatsby-remark-relative-images": "^0.2.3",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-transformer-remark": "^2.6.53",
"gatsby-transformer-sharp": "^2.3.16",
"netlify-cms-app": "^2.11.32",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-helmet": "^5.2.1",
"react-redux": "^4.4.10",
"react-typography": "^0.16.19",
"typography": "^0.16.19",
"typography-theme-kirkham": "^0.16.19"
},
"devDependencies": {
"install-peers": "^1.0.3",
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
Link to my repo
I do not how custom preview takes styles in the first place? I started my project using the default netlify cms gatsby template as a reference but after days of looking at it I don’t understand where some of the styles are coming from. I see inline styles and those make sense but that is not the whole picture. Can someone enlighten me on this?