我想把純React app轉換成NextJs app。在我正在導入的React應用程序中。組件的多個位置。 當我將代碼移動到Next.js環境中時，它顯示錯誤:

Gobal CSS不能從自定義文件以外的文件導入。由于樣式表的全局性質，并且為了避免沖突，請將所有第一方全局CSS導入移動到pages/_app.js .或將導入轉換為組件級CSS (CSS模塊)。

我希望我的CSS作為全局CSS導入到它們的位置。

這里有什么配置有用嗎？

在Next.js項目中，有一個包含global.css文件styles文件夾，如果要創建特定樣式文件并將其導入到文件中任何位置，應該將其命名為*.module.scss并將其導入到所需目標位置

import Classes from 'styles/test.module.css';


//usange


<div className={Classes.yourClassName}>

</div>

要導入。scss文件，您可以按照以下步驟操作:

安裝必要的依賴項:

sass或node-sass:這是將SCSS文件編譯成CSS所必需的。 @zeit/next-sass或next-sass:這是一個Next.js插件，允許導入SCSS文件。

您可以使用npm或yarn安裝這些依賴項。下面是一個使用npm的示例:

npm install sass @zeit/next-sass

將Next.js應用程序配置為使用SCSS插件:

1-在項目的根目錄下創建一個next.config.js文件，如果它還不存在的話。

2-打開next.config.js文件并添加以下代碼: java描述語言

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  /* additional configuration options here */
});

創建SCSS文件:

在項目中創建一個. scss文件。例如，您可以在styles目錄中創建一個名為styles.scss的文件。 在組件中導入SCSS文件:

在React組件中，可以使用相對路徑導入SCSS文件。例如:

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

注意:styles對象將包含在SCSS文件中定義的類名，您可以使用它將樣式應用到您的組件。

在組件中使用導入的樣式:

您可以在JSX代碼中使用導入的樣式作為常規CSS類。為

<div className={styles.container}>
  <h1 className={styles.title}>Hello, Next.js!</h1>
</div>

在上面的示例中，容器和標題類是在styles.scss文件中定義的。

希望它能幫助你:D