gatsby-plugin-postcss | This repo has been moved into gatsbyjs/gatsby | Frontend Framework library
kandi X-RAY | gatsby-plugin-postcss Summary
kandi X-RAY | gatsby-plugin-postcss Summary
This repo has been moved into gatsbyjs/gatsby
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of gatsby-plugin-postcss
gatsby-plugin-postcss Key Features
gatsby-plugin-postcss Examples and Code Snippets
Community Discussions
Trending Discussions on gatsby-plugin-postcss
QUESTION
I am just starting with gatsby and having trouble figuring out how to use gatsby-plugin-image in the following case:
...ANSWER
Answered 2021-May-31 at 14:51Given your filesystem structure, I think your best chance is to use GatsbyImage component, as you said. Something like this should work:
QUESTION
I have a Gatsby and Sanity site that's based on a starter project. Everything has worked great so far, but I updated all of my packages and plugins today in my package.json file to get rid of all npm warnings. This included updating to Gatsby 3.0.3 and PostCss 8 (I'm also now using the gatsby-plugin-postcss 4.0.0).
I managed to work through some initial errors, but now I'm having a problem where it's not recognizing my CSS Modules. I get errors for every component file:
Attempted import error: '[componentName].module.css' does not contain a default export (imported as 'styles')
and when I import the css file in the react components
...ANSWER
Answered 2021-May-23 at 18:34In Gatsby v3 you need to import the modules as:
QUESTION
I'm developing a website with Gatsby and I wanted to implement multi-language support. So I used the gatsby-plugin-react-i18next plugin. I followed all the steps, but it doesn't work, once I log into my website this error message shows: error message
Right now, my code is the next one.
gatsby-config.js
...ANSWER
Answered 2021-May-10 at 09:35Your JSONs looks and the implementation too (couldn't be wrong being that simple). So to me, the issue relies on the configuration. Try something simpler such as:
QUESTION
So I'm trying to run my test blog in Netlify but I have this error below. I don't know what's happening
...ANSWER
Answered 2021-Apr-16 at 05:02Assuming that your project builds correctly locally, this kind of issue is 99% related to mismatching versions of Node, so of the build dependencies installed in the end.
Run this command:
QUESTION
I have been following these steps: https://github.com/strapi/gatsby-source-strapi Since image >> publicURL also didn't work, I have reinstalled the newest version gatsby-source-strapi, in order to be able to get publicURL. This goes throug a local file though...
Here is my gatsby-config.js
...ANSWER
Answered 2021-Apr-27 at 07:26According to:
The page won't display in dev: Error: Cannot read property 'publicURL' of undefined.
images is an array so it needs to be accessed as:
Have you tried?
QUESTION
I've been trying to get live preview in Sanity to work for several days now, without luck.
It works like a charm when I follow this tutorial: how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms.
But when I create a starter blog like this one: sanity-template-gatsby-blog, it does not work at all.
I've followed three tutorials, but it always fails, even if I do exactly the same.
This is my gatsby-config:
...ANSWER
Answered 2021-Apr-22 at 10:07I finally solved it by following this post: https://www.frontendstumbles.com/gatsby-and-sanity-cms-tutorial/
A nice step by step guide that creates a Gatsby and Sanity starter that works with watch mode and drafts mode.
QUESTION
The site loses all functionalities after building it. In develop mode everything works fine, but when I build the website it looks like all scripts are missing. Bootstrap (Carousel DropDowns) are not responding, leflet map and background image not loading and react-multi-carousel do not work. I don't see any errors in the browser console, of course I ran gatsby clean before building. I uploaded the project to netlify. Below I am enclosing the json package:
ANSWER
Answered 2021-Apr-13 at 20:59There's not much debug in the question however, to me, it seems that you are using some dependencies outside React's scope, which may potentially block React's hydration process, which may explain the problem described. For example, using Leaflet instead of React's Leaflet or (depending on its implementation) Bootstrap instead of React's Boostrap.
You should be able to change all React-unfriendly modules to React's ones without too much effort and that should fix your problems.
Keep in mind that if your project "work in develop and breaks in build" doesn't mean that your project work or stops working, it just means that is working under certain and specific circumstances. Basically, and summarizing (to avoid extending the answer), gatsby develop uses the browser as an interpreter, where there are, among other things, global objects like window or document. However, gatsby build occurs in the Node server, where at the build time, there are not global objects because there are not even created yet, that the main reason why you may face a different behavior between both scenarios but doesn't mean that the project stopped working magically.
You can read further details in the Overview of Gatsby Build Process.
Another option, linked with blocking React's hydration, is that some component may be blocking that process because of its own behavior. Be careful when using global objects like window or document (or when importing modules that uses it), they use should be always be wrapped inside the following condition, as you can see from the docs:
When referencing window in a React component.
QUESTION
I built a blog with Gatsby and Tailwind using markdown for blog posts. When querying the data using graphql, I can't get any of the images to display. My images are stored within the src/ directory in an images/ folder. My posts are inside of a pages/ folder within that same directory. At one point the site displayed ALL of the images including the ones in markdown, but wouldn't work when deployed to Netlify. I've gotten the site to deploy, but now none of my images are showing and I've tried everything to get them back. I've also tried using gatsby-image (fixed and fluid) and still nothing.
This is my first project with gatsby, markdown, and graphql. Currently, the deployed site nikkipeel.netlify.app shows the proper path on the blog page for posts when inspected using devtools (../images/example.jpg), but still no image actually displays. 🤷♀️
Github repo: gatsby-blog
project structure:
...ANSWER
Answered 2021-Feb-01 at 14:08As you can see in the documentation, the when dealing with markdown plus images, the paths should be relative to the markdown file itself so:
QUESTION
When using PostCSS with CSS modules in Gatsby.js, when I fire up development mode, the CSS files are not applied. To resolve it, I have to open each CSS file and save it for it to be applied.
I'm using the gatsby-plugin-postcss plugin. We use CSS module like style.module.css. Everything works when each CSS file is manually saved or when in build mode.
How can I resolve the CSS bug on gatsby.js?
...ANSWER
Answered 2021-Jan-12 at 07:36I wouldn't say it's a bug, it possibly a default configuration. According to the docs:
If you need to override the default options passed into css-loader
Note: Gatsby is using
css-loader@1.0.1
QUESTION
I use Gatsby and NetlifyCMS for my website and currently get the following error message at running Workflow in GitHub Actions:
...ANSWER
Answered 2020-Dec-07 at 13:55The issue seems to be related to the favicon path, ensure that the path is correct and try changing it to other dummy image.
If the paths are correct this issue is likely due to an outdated dev-dependency (@babel/helper-compilation-targets) or, according to this GitHub thread it could be also due to an invalid version of libvips dependency. In both cases you can try the same solution:
Remove your lock file (package-lock.json or yarn-lock.json), and your node_modules folder and reinstall your dependencies with yarn install or npm install. If the issue persists, try:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install gatsby-plugin-postcss
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
