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

Question

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

reactjssassnext.js

6

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

这对组件级别是否有效？例如，我是否可以有一个components/*目录，在其中存储我的组件，每个组件都有一个导入*.module.scss文件的*.tsx文件？

这对我现在没有效果。我没有得到错误，但组件级别的样式不加载，而全局样式却会加载。

编辑：明确一下，我不想导入像 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;
}

- Ganymede

是的，只要您使用 npm install sass 安装了 sass，Sass（包括Sass模块）在Next.js中具有内置支持。您能否提供一个代码示例，其中尝试使用Sass模块？ - juliomalves

1

但是专业提示：不要将CSS捆绑到JS中。将Sass作为单独的构建步骤，并将其保持为纯静态资源，以便浏览器可以独立缓存它，并且您的index.html可以使用标准的<link>加载它。js-css和js-sass可能看起来很方便，但它们不需要webpack或任何类似的东西才能工作。只需独立运行Sass编译即可。您的用户值得拥有更好的体验。 - Mike 'Pomax' Kamermans

@juliomalves 我添加了一个代码示例 @Mike'Pomax'Kamermans 完全同意你的观点，我想要做的就是将我的项目结构化，使得每个组件都在components/*/*.tsx中，并且具有components/*/*.module.scss中的样式。 - Ganymede

1

@Ganymede 为了澄清你最后的编辑，你必须将Sass模块作为对象导入并使用其属性。你不能像全局Sass那样导入它，因为它是有范围的。 - juliomalves

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- juliomalves · Accepted Answer

3

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

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

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

- juliomalves

这是答案（使用styles.Main），我认为它应该有更好的文档记录。另外：vscode似乎错误地报告了import styles from ...行，即使代码可以构建和运行（红色波浪线显示“找不到模块”）。 - Ganymede

1

文档的 CSS 模块部分中提到了它，这也直接适用于 Sass。然而，我同意 - 可以使用更好的文档。 - juliomalves

Next.js（或sass）为什么会向我的“Main”组件添加类名Main_Main__y3p83？我的意思是，在生成的HTML中，我看到<div class="Main Main_Main__y3p83">Main</div>。我没有添加第二个类。 - Ganymede

1

Sass模块通过自动创建唯一的类名来本地作用域化Sass。这使您可以在不担心冲突的情况下在不同的文件中使用相同的类名。这就是Sass模块的工作原理。 - juliomalves