如何在 Next.js 组件中导入 Sass 模块答案

【问题标题】：How to import Sass modules in Next.js components如何在 Next.js 组件中导入 Sass 模块
【发布时间】：2021-05-29 21:55:54
【问题描述】：

使用最新的 Next.js，我可以使用 import '../styles/global.scss'; 之类的指令在 pages/_app.js 中全局导入 Sass 样式，而无需依赖 @zeit/next-sass。

这是否适用于组件级别？例如，我是否可以有一个 components/* 目录来保存我的组件，并且每个组件都有一个 *.tsx 文件来导入一个 *.module.scss 文件？

这对我现在不起作用。我没有收到错误，但组件级样式不会加载，而全局样式会加载。

编辑：明确地说，我确实不想要导入像import styles from ...scss 这样的对象。我只想为这个组件导入 Sass，而不是任何具有属性的对象。

这是一个代码示例，当我使用npx run dev 运行它时，我可以看到globals.scss 样式但看不到Main.module.scss 样式。

我从头开始运行npx create-next-app _，然后运行npm install sass。只有五个重要文件，一旦我制作了一个我想要样式的简单Main 组件：

components/Main/Main.tsx：

import './Main.module.scss';

export default function Main() {
  return <div className="Main">Main</div>;
};

components/Main/Main.module.scss：

由于某种原因，此规则不适用！

.Main {
    color: blue;
}

pages/_app.js：

确实会应用这些全局样式！

import '../styles/globals.scss';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
};

pages/index.js：

import Head from 'next/head';
import Main from '../components/Main/Main';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Main />

    </div>
  )
};

styles/globals.scss：

此样式规则已应用，但不适用于上述color: blue。

* {
  box-sizing: border-box;
}

【问题讨论】：

是的，Sass（包括 Sass 模块）在 Next.js 中有内置支持，只要您安装 sass 和 npm install sass。您能否提供一个您尝试使用 Sass 模块的代码示例？
但是提示：不要将你的 CSS 捆绑到你的 JS 中。让您的 sass 成为一个单独的构建步骤，并将其保留为纯静态资源，以便浏览器可以独立缓存它，并且您的 index.html 可以使用标准 <link> 加载它。 js-css 和 js-sass 可能看起来很方便，但它们不需要 webpack 或捆绑或类似的东西来工作。只需运行独立于 JS 包的 sass 编译即可。您的用户应得的。
@juliomalves 我添加了一个代码示例@Mike'Pomax'Kamermans 完全同意你的看法，我要做的就是构建我的项目，使每个组件都在components/*/*.tsx 中，并且在components/*/*.module.scss 中具有样式.
@Ganymede 为了澄清您的上次编辑，您必须将 Sass 模块作为对象导入并使用其属性。你不能像全局 Sass 那样导入它，因为它是作用域的。

标签： reactjs sass next.js

【解决方案1】：

由于 Sass 模块在它们使用的模块中限定了类名，因此您需要将其作为对象导入（在此示例中为 styles），并且每个类都作为导入对象的属性进行访问。

import styles from './Main.module.scss';

export default function Main() {
    return <div className={styles.Main}>Main</div>;
};

【讨论】：

这就是答案（使用styles.Main），我认为应该更好地记录它。另外：vscode 似乎错误地将 import styles from ... 行报告为错误，即使代码构建并运行（红色波浪线表示“找不到模块”）。
在文档的CSS Modules section 中有对它的引用，它也直接转换为 Sass。但是，我同意 - 可以使用更好的文档。
Next.js（或 sass）向我的 Main 组件添加类似 Main_Main__y3p83 的类名是否有原因？我的意思是，在生成的 html 中，我看到了<div class="Main Main_Main__y3p83">Main</div>。我没有添加第二类。
Sass 模块通过自动创建唯一的类名来本地限定 Sass。这使您可以在不同的文件中使用相同的类名，而不必担心冲突。这就是 Sass 模块的工作原理。