gatsby

问题 I'm setting up a Gatsby Project with gatsby-plugin-sass . my gatsby-config.js file: module.exports = { plugins: [ 'gatsby-plugin-resolve-src', 'gatsby-plugin-sass', 'gatsby-plugin-react-helmet', { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/assets/images`, }, }, ], } I have the following styles file structure : | |src |-styles |--base |--- _variables.scss |--components |--- _Buttons.scss |--- ... |--main.scss Im my _Buttons.scss file I'm importing

问题 Goal: I'm trying to loop a video infinitely on a React gatsby site. I have a mp4 file locally under assets, but it doesn't show up on my screen. What I've tried: I thought it might be a CSS issue so I set it and it's clearly width and height 100% of the window but video is still not showing up. JS: import React from "react" import "./index.css" export default () => ( <div> <video id="background-video" loop autoPlay> <source src="..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4"

问题 Goal: I'm trying to loop a video infinitely on a React gatsby site. I have a mp4 file locally under assets, but it doesn't show up on my screen. What I've tried: I thought it might be a CSS issue so I set it and it's clearly width and height 100% of the window but video is still not showing up. JS: import React from "react" import "./index.css" export default () => ( <div> <video id="background-video" loop autoPlay> <source src="..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4"

问题 Goal: I'm trying to loop a video infinitely on a React gatsby site. I have a mp4 file locally under assets, but it doesn't show up on my screen. What I've tried: I thought it might be a CSS issue so I set it and it's clearly width and height 100% of the window but video is still not showing up. JS: import React from "react" import "./index.css" export default () => ( <div> <video id="background-video" loop autoPlay> <source src="..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4"

问题 Goal: I'm trying to loop a video infinitely on a React gatsby site. I have a mp4 file locally under assets, but it doesn't show up on my screen. What I've tried: I thought it might be a CSS issue so I set it and it's clearly width and height 100% of the window but video is still not showing up. JS: import React from "react" import "./index.css" export default () => ( <div> <video id="background-video" loop autoPlay> <source src="..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4"

问题 I copied a simple full page preloader via jQuery on my Gatsby app. The preloader works however instead of disappearing after 4 seconds its loading forever on production but on local it works just fine. Here's my Preloader component: import React from 'react' const Preloader = () => { return ( <div id="loader-wrapper"> <div id="loader"></div> <div className="loader-section section-left"></div> <div className="loader-section section-right"></div> </div> ) } export default Preloader And then on

问题 The problem When I run npm run build in my Gatsby project, I'm getting multiple warnings of the same kind: warn chunk styles [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j s??ref--12-oneOf-0-3!./src/components/MineralsHeading/MineralsHeading.module.scss despite it was not able to fulfill desired ordering with these modules: * css

问题 Can anyone shed some insight on how I would go about paginating pages in Gatsby when filtering Wordpress posts by category? For context, my gatsby-node file: const path = require('path') module.exports.createPages = async ({ graphql, actions }) => { // import { paginate } from 'gatsby-awesome-pagination'; const { createPage } = actions const blogPostTemplate = path.resolve('./src/templates/blog-post.js') const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js') const

问题 I'm using Gatsby and Jest for testing. By default Gatsby handles the GraphQL data fetching, and from what I've found it doesn't provide any solution for testing its GraphQL queries in unit tests. Is there a way to do this? Right now I'm just mocking the queries the test the component itself, but I want to be able to test queries work without manually doing so in GraphiQL. Here's what my code looks like: PageContent.jsx import PropTypes from 'prop-types'; import React from 'react'; const

问题 I'm using Gatsby and Jest for testing. By default Gatsby handles the GraphQL data fetching, and from what I've found it doesn't provide any solution for testing its GraphQL queries in unit tests. Is there a way to do this? Right now I'm just mocking the queries the test the component itself, but I want to be able to test queries work without manually doing so in GraphiQL. Here's what my code looks like: PageContent.jsx import PropTypes from 'prop-types'; import React from 'react'; const