如何使用 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 入门指南中的说明进行编译

<TheComponent>.module.scss

像这样导入：

$color: red;

.someclassselector {
    color: $color;
}

并像这样应用于组件：

<TheComponent className={styles.someclassselector} />

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