在GatsbyJS中实现CSS重置

Question

我是GatsbyJS的新手，并且一直在寻找解决方案的文档，但是似乎找不到一个解决方案，这使我觉得我缺少了更大的一块。我认为消除浏览器默认样式的方法是css-reset.css在索引布局中导入某种文件，然后使用自己的样式覆盖这些文件，如下所示：

import React from 'react';

import reset from './reset.module.css';
import styles from './index.module.css';

但我似乎无法以这种方式覆盖它们（仅实现了重置）。我在这里缺少关于GatsbyJS的构建过程的基本信息吗？我需要整合到gatsby-config文件中吗？是否有一个插件可以以此/更好地实现CSS重置？谢谢您的帮助。

Answer 1

作为导入 CSS 模块的替代方法，您可以简单地css-reset.css按照您最初的描述进行导入。

按照默认 Gatsby starter 的示例，您可以将样式表放入/layouts，然后/layouts/index.js像这样导入：

import ./reset.css
import ./index.css

这将为您全局应用您的样式。

Gatsby 的另一个选择是使用Typography.js并通过overrideStyles设置应用全局重置样式。

Answer 2

您可以使用gatsby-browser.js. 如果您有一致主题的布局组件，您也可以在那里导入它。

这样做只包含样式表：

import '../styles/myGlobalStyle.css';

不需要将导入分配给变量，所以不要这样做：

import globalStyles from '../styles/myGlobalStyle.css';

例如，在(v2) 中使用normalize.cssgatsby-browser.js：

import React from 'react';
import { Provider } from './src/components/Context';

// This next line is all you need to import global styles
import 'normalize.css/normalize.css';

export const wrapRootElement = ({ element }) => {
  const ConnectedRootElement = <Provider>{element}</Provider>;
  return ConnectedRootElement;
};