0

我正在使用 GatsbyJS 和 Snipcart 构建一个电子商务平台。它工作得很好，但是我想覆盖 Snipcart 提供的默认主题，并且当我出于某种原因想要更改主要的默认 CSS 时gatsby-config.js，它不起作用。有人有解决方案吗？谢谢。下面的代码使 snipcart 停止运行，正是在我添加样式选项时：

  {
    resolve: 'gatsby-plugin-snipcartv3',
    options: {
      apiKey: 'API_IS_HIDDEN_FOR_A_REASON',
      autopop: true,
      styles: '.src/components/layout.css'
    }
  },

问题是如何使 Snipcart 版本 3 在与 一起使用时接受我提供的不同样式GatsbyJS？我尝试了他们的文档，但没有太多，也看了github。

4

1 回答 1

0

我发现最简单的方法如下：

  1. 在 snipcart 插件配置选项中，将样式设置为 false，这样它就不会链接默认样式表

{
  resolve: 'gatsby-plugin-snipcartv3',
  options: {
    apiKey: process.env.SNIPCART_KEY,
    autopop: false,
    styles: false
    }
 }

  1. 创建一个新的样式表（例如，src/styles/cart.css）
  2. 将 Snipcart 的默认样式表中的样式复制到您的 cart.css 中，并进行所需的自定义
  3. 将您的 cart.css 导入您的 Layout 组件（或 gatsby-browser.js）
于 2020-11-02T01:27:27.263 回答