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

Question

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

Gan*_*ede 6 sass reactjs next.js

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

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

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

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

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

我从头开始跑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>;
};

Run Code Online (Sandbox Code Playgroud)

components/Main/Main.module.scss:

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

.Main {
    color: blue;
}

Run Code Online (Sandbox Code Playgroud)

pages/_app.js:

这些全局样式确实得到了应用！

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

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

Run Code Online (Sandbox Code Playgroud)

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>
  )
};

Run Code Online (Sandbox Code Playgroud)

styles/globals.scss:

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

* {
  box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

jul*_*ves 4

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

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，7 月前
查看次数：	4938 次
最近记录：	4 年，7 月前