reactjs - 如何使用 Next.js 在组件级别导入 SCSS

Question

我来自 CRA 背景并通过 Next.js 版本 9.4.2 工作
我的项目树看起来像这样:-

pages/
    _app.tsx
    index.tsx
components/
    Navbar/
        index.ts
        Navbar.tsx
        Navbar.scss

在我的 Navbar.tsx我有一个声明 import './Navbar.scss';这给了我以下错误:-

./src/components/Navbar/Navbar.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
Location: src/components/Navbar/Navbar.tsx

如上所述，如果我移动 import Navbar.scss，错误就会消失。对 pages/_app.tsx 的声明
我知道我可以切换到 Navbar.module.scss ，但是我不想走模块化 scss 的路线，因为我希望我的 scss 变得复杂我想坚持我编写 scss 的方式，而不是继续寻找解决可能出现的问题的方法。我愿意在这里被说服，但我还没有找到好的阅读资料来选择它作为我的道路。
所以从外观上看，我坚持导入所有 <component>.scss _app.tsx 中的文件.这会给我留下一长串 <component>.scss在我的 _app.tsx 中导入我也会留下很多 <component>.scss可能有条件地不呈现的组件的文件。
我在这里有什么选择？

Answer 1

您的 Navbar.scss文件未正确命名。
假设您的样式表包含类似...

$color: red;

.someclassselector {
    color: $color;
}

组件样式表文件必须按照 next.js 的以下约定命名按照下一个 css getting started guide 中的说明编译它们

<TheComponent>.module.scss

像这样导入:

import styles from './<MyComponent>.module.scss>';

并像这样应用于组件:

<TheComponent className={styles.someclassselector} />

不是真正的专家，但您似乎应该坚持 class选择器为 global只有在 pages/_app.js 中导入选择器才能声明它们。 .您可以命名 main.scss要使用的文件 Global或 Tag Element选择器如 h1 {} , h2{} , * {} ， ETC。