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

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

reactjs sass next.js

Reactjs 如何在Next.js组件中导入Sass模块,reactjs,sass,next.js,Reactjs,Sass,Next.js,使用最新的Next.js，我可以在pages/_app.js中全局导入Sass样式，使用类似于import'../styles/global.scss'的指令和不依赖于@zeit/next sass 这在组件级别起作用吗？例如，我可以有一个components/*目录保存我的组件，并且每个组件都有一个导入*.module.scss文件的*.tsx文件吗这对我现在不起作用。我没有收到错误，但是组件级样式不会加载，而全局样式会加载编辑：为了清楚起见，我不想从…scss导入导入样式这样的对象。我只

使用最新的Next.js，我可以在

pages/_app.js

中全局导入Sass样式，使用类似于

import'../styles/global.scss'的指令和不依赖于@zeit/next sass

这在组件级别起作用吗？例如，我可以有一个components/*
目录保存我的组件，并且每个组件都有一个导入*.module.scss
文件的*.tsx
文件吗
这对我现在不起作用。我没有收到错误，但是组件级样式不会加载，而全局样式会加载
编辑：为了清楚起见，我不想从…scss导入导入样式这样的对象。我只是想为这个组件导入Sass，而不是任何具有属性的对象
下面是一个代码示例，当我使用npx run dev
运行它时，我可以看到globals.scss
样式，但看不到Main.module.scss
样式
我从头开始运行了npx创建下一个应用程序，然后npm安装sass
。只有五个重要的文件，一旦我制作了一个简单的Main
组件，我想对其进行样式设置：

组件/Main/Main.tsx
：


pages/_app.js
：

这些全局样式确实得到应用
import '../styles/globals.scss';

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


style/globals.scss
：

应用此样式规则，但不应用上面的color:blue

* {
  box-sizing: border-box;
}

由于Sass模块在它们所使用的模块中定义类名的范围，因此需要将其作为对象导入（本例中为样式
），并且每个类都作为导入对象上的属性进行访问
从“/Main.module.scss”导入样式；
导出默认函数Main（）{
回水总管；
};
是的，只要您使用npm安装Sass
安装Sass，Sass（包括Sass模块）在Next.js中就具有内置支持。您能提供一个代码示例，在其中您尝试使用Sass模块吗？但是protip：不要将CSS捆绑到JS中。将sass作为一个单独的构建步骤，并将其保持为一个简单的ass静态资源，以便浏览器可以独立缓存它，并且index.html可以使用标准的
加载它。js css和js sass看起来很方便，但它们不需要网页包、捆绑或任何类似的东西来工作。只需独立于JS包运行sass编译。你的用户应该得到它。@juliomalves我添加了一个代码示例@Mike'Pomax'Kamermans完全同意你的意见，我所要做的就是构建我的项目，使每个组件都位于components/*/*.tsx
中，并且在components/*/*.module.scss
@Ganymede中，以澄清你的上一次编辑，您必须将Sass模块作为对象导入并使用其属性。您不能像导入全局Sass一样导入它，因为它的作用域是有限的。这就是答案（使用styles.Main
），我认为应该更好地记录它。另外：vscode似乎错误地将导入样式从…
行报告为错误，即使代码生成并运行（红色扭曲的行表示“找不到模块”）。文档中有对它的引用，它也直接转换为Sass。但是，我同意-可以使用更好的文档。是否有原因Next.js（或sass）在我的Main
组件中添加一个类名称，如Main\uuuuuuy3p83
？我的意思是，在生成的html中我看到Main。我没有通过自动创建唯一的类名来添加第二个类。Sass模块在本地作用于Sass。这允许您在不同的文件中使用相同的类名，而不必担心冲突。这就是Sass模块的工作原理。
import '../styles/globals.scss';

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

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

* {
  box-sizing: border-box;
}