标签: gatsby-plugin

运行 Gatsby 版本 3.0.1，使用 sass 1.32.8。我刚刚开始玩一些东西，我遇到了一个我无法解决的奇怪问题。

./gatsby-config.js

module.exports = {
  /* Your site config here */
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require("sass"),
      },
    },
  ],
}

./src/pages/index.js

import React from "react"
import homeStyles from '../styles/scss/index.module.scss'

export default function Home() {
  return <div className={homeStyles.testElement}>Hello world!</div>
}

./styles/scss/index.module.scss

.testElement {
  font-size: 72px;
}

我得到的错误是Attempted import error: '../styles/scss/index.module.scss' does not contain a default export (imported as 'homeStyles').

如果我尝试import * as homeStyles from '../styles/scss/index/module.scss错误是：Attempted import error: 'testElement' …

我用来gatsby-plugin-ts为我的 graphql 页面查询生成类型。

我遇到的问题是，生成的所有类型都会返回T | undefined所有字段的类型，因此我需要在任何组件中使用它们之前检查所有查询子字段，否则编译器将引发错误。

举gatsby-plugin-image个例子。给出一个查询：

export const query = graphql`
  query IndexPage {
    banner: file(relativePath: { eq: "banner.jpg" }) {
      childImageSharp {
        gatsbyImageData(width: 1920)
      }
    }
  }
`;

结果data.banner应该传递给getImage函数，但如果您尝试这样做，打字稿可以理解地抛出以下错误，因为 undefined 不能分配给IGAtsbyImageData预期的getImage

当涉及更复杂的查询（例如来自 markdownremark 插件的查询）时，情况会更糟：每次都需要手动检查一个查询结果的所有子字段。有解决办法吗？

我正在尝试将图像的路径作为道具传递给组件

注意：组件和索引页都可以通过相同的路径访问图像。当我将路径作为道具传递时它不起作用

在下面的代码中，我尝试使用 GatbsyImage 和 StaticImage 标签似乎都失败了

索引.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/index.scss';
import Main from  '../Layouts/main';
import ImageOverlay from '../components/ImageOverlay';
import { StaticImage } from "gatsby-plugin-image"

function Home(){
  // Home page images
  return (
    <Main >
    <section className="home_page">
      <ImageOverlay path="../images/home/places/portblair.png"> </ImageOverlay>
    </section>
    </Main>
  )
}

export default Home
 

组件/ImageOverlay.js

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <GatsbyImage image={path}></GatsbyImage>
          <StaticImage src={path}></StaticImage>
      </div> 
  
    )
}
export default …

我决定node-sass从我的 gatsby 项目中删除并使用sass。我遵循了此处针对 v3提到的内容。我删除了node-sass，现在我有这些版本package.json：

"gatsby-plugin-sass": "3.1.0",
"sass": "1.32.5",

我需要能够一次性为全局变量/mixins/函数编写一些 @use 或 @import 规则，以便我可以在所有 scss 文件中使用它们，因此我不必一遍又一遍地重复相同的规则。

有了node-sass这样的工作：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    includePaths: [`${__dirname}/src/styles`],
    data: `@import "globals.scss";`,
  },
},

升级后，该includePaths属性有效但data无效，我从我的 scss 文件中收到有关“丢失”变量的错误：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    sassOptions: {
      includePaths: [`${__dirname}/src/styles`],
      data: `@use 'globals' as *;`,
    },
  },
},

如果我@use 'globals' as *;在每个 scss 文件中插入规则，错误就会消失，一切都按预期工作，但我不想插入这一行并修改我所有的 sass 文件。

我很确定这个问题sass-loader与此声明（文档）有关，但我无法弄清楚如何使其工作以及为什么它以前有效：

?? …

我一直在执行以下步骤：https://github.com/strapi/gatsby-source-strapi 由于 image >> publicURL 也不起作用，我已经重新安装了最新版本的 gatsby-source-strapi，以便能够获取 publicURL。不过，这会通过本地文件......

这是我的 gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL:  "http://localhost:1337",
        contentTypes: ["articles"],
        singleTypes: [`homepage`, `global`],
        queryLimit: 1000,
      },
    },
    "gatsby-plugin-postcss",
  ],
};

我的博客页面如下所示

import React from 'react';
import Footer from '../partials/Footer';
import Navbar from '../partials/Navbar';

import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiArticles{
      edges {
        node {
          strapiId
          title …

我正在尝试根据文档https://www.gatsbyjs.com/plugins/gatsby-plugin-image#installation通过 npm 安装 gatsby-plugin-image

在终端中收到以下错误：

$ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
npm ERR! Found: gatsby@2.32.9
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^2.26.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0-next.0" from gatsby-plugin-image@1.0.0
npm ERR! node_modules/gatsby-plugin-image
npm ERR!   gatsby-plugin-image@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or …