谁在nextjs中使用scss

Question

修改

错误：用__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({})

Answer 1

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

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

Answer 2

好的，看来您的项目设置中存在一些错误：

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