如何使用 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，而不是继续寻找解决以后可能出现的问题的方法。我很乐意在这里被说服，但我没有找到很好的阅读资料来选择它作为我的道路。

因此，从外观上看，我无法导入 _app.tsx 中的所有 <component>.scss 文件。这将在我的 _app.tsx 中留下一长串 <component>.scss 导入，我还将留下很多 <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{}、* {} 等

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

How to import SCSS on Component Level with Next.js

sass

reactjs

server-side-rendering

next.js