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

Posted 2023-03-06

【中文标题】如何使用 Next.js 在组件级别导入 SCSS

【英文标题】：How to import SCSS on Component Level with Next.js

【发布时间】：2020-10-29 03:17:45

【问题描述】：

我来自 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。这将在我的_app.tsx 中留下一长串<component>.scss 导入，并且我还将留下许多可能有条件不渲染的组件的<component>.scss 文件。

我在这里有什么选择？

【问题讨论】：

似乎可以解决这个问题的解决方案在这里：***.com/questions/45192088/…

你最终采用了什么解决方案？

@TaylorA.Leach 我用过import styles from <component>.module.scss

【参考方案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 选择器，因为只有在 pages/_app.js 中导入选择器才能声明 global 选择器。您可以命名main.scss 文件以使用Global 或Tag Element 选择器，例如h1 、h2、* 等。