如何使用 CSS 全局变量？

Question

首先非常感谢您抽出宝贵的时间。

我的怀疑很简单，但我找不到让它工作的方法。

所以......基本上我有一个'/pages/_app.js'文件：

import '../public/styles/global.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

全局 css 文件“/public/styles/global.css”：

:root {
  --bg-color: #000;
}

一个 css 模块文件'/public/styles/header.module.css'：

.header {
  background-color: var(--bg-color);
}

最后是使用 css class 的主页“/pages/index.js”：

import React from 'react';
import headerStyle from '../public/styles/header.module.css';

export default function Home() {
  return <div className={headerStyle.header}>Test</div>;
}

我没有收到错误，但我没有设法引用 css 模块中的全局变量。 你们能帮我解决我做错了什么吗？

Answer 1

如果pages/目录存在于src/下，那么<Home>组件的路径应该是/src/pages/并且headerStyle的导入应该如下：

import headerStyle from "../../public/styles/header.module.css";

您只需要将 go 再上一个目录。

/*
 *  @filename /src/pages/index.jsx
 */
import React from "react";
import headerStyle from "../../public/styles/header.module.css";

const Home = () => {
  return <div className={headerStyle.header}>Test</div>;
};

export default Home;

这是一个用于演示的CodeSandbox片段。