在React组件中导入SCSS文件时，不包含@use文件的类。

Posted 2023-01-12

我遇到了一个奇怪的问题，我有两个类和一个样式库（通过npm安装），但没有正确地包含。

第一个文件是我的 main.scss，然后我有一个 page.scss 文件，我在我的 page.js 组件，以及一个样式库。我还有 fonts.scss 和 variables.scss

我的顶部 main.scss 看起来是这样的。

@charset "utf-8";
@use "~styling-library/styling-library";
@use "fonts";
@use "variables" as *;

这似乎是正常的，因为我的字体和风格库都被正确地包含了。甚至在我的page.js上也没有直接引用它。

我的页面顶部有这样的文字艺术 page.scss:

@use "main";
@use "variables" as *;

我把这句话写在上面。page.js:

import * as styles from '../styles/page.scss';

然后我有一个组件，比如说，它看起来是这样的。

<section className=`styles.classFromLibrary styles.classFromMainStylesheet`>

有趣的是, classFromLibrary 尽管如我之前所说，它并没有直接从我的 page.scss. 但是... styles.classFromMainStylesheet 出现了未定义。为什么会出现这种情况？我是否需要做一些事情来使主样式表中的类可以被访问？

答案

按照典型的做法，我回答完后直接找出了问题所在。原来一切 是 导入，但类名和我想的不一样。我以为它会自动假设驼峰大写表示某物是连字符的，但显然不是，我必须弄清楚如何手动配置。显然不是，我必须想办法手动配置。