谁在 nextjs 中使用 scss答案

【问题标题】：who to use scss in nextjs谁在 nextjs 中使用 scss
【发布时间】：2020-12-21 12:34:03
【问题描述】：

编辑

错误：__app 代替 _app。

我对我的问题有点困惑。我想在我的 react/next 应用程序中使用 scss，但没有任何效果。

我安装了：

yarn add node-sass @zeit/next-sass

在我的__app.tsx 我输入：

import React from 'react';
import '../styles/importer';

/**
 * includes all pages, here allows to import the css import everywhere
 * @Param {any} Component
 * @Param {any} pageProps
 * @Constructor
 */
export default function MyApp({ Component, pageProps }: any): JSX.Element {
  return <Component {...pageProps} />;
};

为了测试，我创建了索引页面：

import React from 'react';

function HomePage() {
  return (
    <section id='home-page'>
      <h1 className='title'>Welcome</h1>
    </section>
  )
}

export default HomePage;

还有 scss 文件：

// importer.scss
@charset "utf-8";
@import "theme";

// theme.scss
#home-page {
  background-color: #ff0000;

  .title {
    color: #00ffff;
  }
}

我也有next.config.js：

const withSass = require('@zeit/next-sass')
module.exports = withSass({})

【问题讨论】：

你能在CodeSandbox重新创建你的项目吗？
脚本由于某种原因没有启动...codesandbox.io/embed/pedantic-knuth-d2vfu
@Titulum github repo github.com/bouteillerAlan/aiweb
我创建了一个带有修复程序的拉取请求：github.com/bouteillerAlan/aiweb/pull/1

标签： reactjs sass next.js

【解决方案1】：

查看他们的文档https://nextjs.org/docs/advanced-features/custom-app

您正在创建一个自定义 App.js，它应该只以一个 _ 开头，但您的 App.js 有两个。

【讨论】：

【解决方案2】：

好的，您的项目设置中似乎有一些错误：

您的__app.tsx 文件应为_app.tsx。
您应该导入importer.scss 文件文件扩展名。

【讨论】：