gatsby: [gatsby-plugin-netlify-cms] Preview stylesheet is not registering

Description

After updating gatsby-plugin-netlify-cms to 4.1.0 from 3.0.9, none of the netlify preview templates have styles applied.

What’s interesting is if I import netlify-cms instead of netlify-cms-app, this problem goes away. Looking at the chrome’s network tab, it appears cms.css is not getting picked up when importing netlify-cms-app

cms.js

import CMS from `netlify-cms`;
...
CMS.registerPreviewStyle(`cms.css`);

It seems like the only documented difference that probably matters between netlify-cms and netlify-cms-app is react and react-dom are now peerDependencies - although this doesn’t really explain why this is happening.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 4.4.23 -
/nix/store/mcyvp1s45scjkkhyb1m16aqlsb8wr6hs-bash-interactive-4.4-p23/bin/bash
  Binaries:
    Node: 10.15.3 -
/nix/store/47wbs3fgygg6i7za4knbcqpmrwlckqy4-bifrost-env/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - /nix/store/47wbs3fgygg6i7za4knbcqpmrwlckqy4-bifrost-env/bin/npm
  Languages:
    Python: 3.6.8 - /home/jchi/Projects/bifrost/backend/venv/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 60.7.1
  npmPackages:
    gatsby: 2.10.4 => 2.10.4
    gatsby-cli: 2.7.2 => 2.7.2
    gatsby-link: 2.2.0 => 2.2.0
    gatsby-plugin-intercom-spa: 0.1.0 => 0.1.0
    gatsby-plugin-netlify-cms: 4.1.0-dev-1561486008141 => 4.1.0-dev-1561486008141
    gatsby-plugin-polyfill-io: 1.1.0 => 1.1.0
    gatsby-plugin-react-helmet: 3.1.0 => 3.1.0
    gatsby-plugin-root-import: 2.0.5 => 2.0.5
    gatsby-plugin-sass: 2.1.0 => 2.1.0
    gatsby-plugin-sentry: 1.0.1 => 1.0.1
    gatsby-plugin-sitemap: 2.2.0 => 2.2.0
    gatsby-source-apiserver: 2.1.3 => 2.1.3
    gatsby-source-filesystem: 2.1.0 => 2.1.0
    gatsby-transformer-json: 2.2.0 => 2.2.0

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 22 (10 by maintainers)

Most upvoted comments

I did some digging. The css file is not extracted for development builds.

There are two current issues with the plugin affecting it:

The code here: https://github.com/erezrokah/gatsby/blob/0b96c79bf894fb604d66ce8240298e38f55fff1b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L55 doesn’t handle rules in the following format:

rules: [
        {
          test: /\.less$/,
          use: [
            loaders.miniCssExtract(),
            loaders.css({ importLoaders: 1 }),
            loaders.postcss(),
            `less-loader`,
          ],
        },
      ],

The MiniCssExtractPlugin should not be used in development builds: https://github.com/webpack-contrib/mini-css-extract-plugin/tree/50434b55c9df9cd3c26f2243e23df83e2964c720#advanced-configuration-example. I figured this out after fixing issue number 1 and getting compilation errors while running gatsby develop

erezrokah on Nov 17, 2019

Can we label as not not stale?

vai0 on Oct 11, 2019

Hey! Could you link to a minimal reproduction of this?

CC @erquhart

sidharthachatterjee on Jun 26, 2019