我在next.js的指定文件中的項(xiàng)目上使用了一個(gè)不純粹的選擇器

我發(fā)現(xiàn)這個(gè)答案說，不可能使用不同于global.css的非純選擇器 https://github.com/vercel/next.js/discussions/31705

我想知道，有沒有可能在一個(gè)不同的文件中使用一些額外的配置

我目前的next.js版本是& quot下一個(gè)& quot:& quot^13.3.4"；

之后，您可以在css中使用嵌套選擇器，如下所示:

.landing canvas {
    width: 100%;
    max-width: 100%;
}

如果您的第三方css文件太長，無法手動(dòng)修改，但您希望僅在應(yīng)用程序的特定頁面上使用它，您可以使用sass(您需要安裝帶有npm i -D sass的sass):

import styles from "./landing.module.scss"

export default function Landing() {
  return (
    <main className={styles.landing}>
      <canvas />
    </main>
  );
}

// landing.module.scss

.landing {
    @import "landing";
}

// landing.css

canvas {
    width: 100%;
}

如果您的第三方css是您打算跨多個(gè)頁面使用的真正的全局css，您可以將其導(dǎo)入您的_app.tsx:

import "@/styles/landing.css";