javascript CSS模块不应用样式- next.js 13

4sup72z8 于 2023-01-01 发布在 Java

关注(0)|答案(4)|浏览(137)

将next.js 13.1.1与/app配合使用
到目前为止，我一直通过global.css来制作我所有的样式，但我正在尝试将它们迁移到CSS模块中。
在我的根layout.js中，我有一个从./header.js导入的Header组件。
我制作了一个模块../styles/header.module.css，并使用import styles from "../styles/header.module.css";将其导入./header.js，但当我尝试使用它时，例如使用<h1 className={styles.big_title}>时，没有应用任何CSS。
任何帮助将不胜感激，我一直试图修复这个小时。没有错误发生，CSS只是不适用。

// ./layout.js

import Header from "./header";
import Footer from "./footer";

import "../styles/global.css";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
          <title>SB-Wiki</title>
      </head>
      <body>
          <Header />
          <main>
              {children}
          </main>
          <Footer />
      </body>
    </html>
  );
}

/* ../styles/header.module.css */

.big_title {
    color: red;
}

// ./header.js

import styles from "../styles/header.module.css";

export default function Header() {
    return (
        <header>
            <p className={styles.big_title}>Test</p>
        </header>
    )
}

如果我将import styles from "../styles/header.module.css";添加到page.js的顶部，则会显示样式，但这会破坏具有根layout.js的意义，因为框架就是这样设计的。

JavaScript

来源：https://stackoverflow.com/questions/74965841/css-modules-not-applying-style-next-js-13

4条答案

按热度按时间

xwmevbvl1#

问题出在next.js上。您需要为next.config.js创建配置文件，以便正确支持您的CSS。

module.exports = {
   cssModules: true,
     cssLoaderOptions: {
   importLoaders: 1,
  localIdentName: "[]",
 },
};

配置文件将告诉next.js将您的CSS文件视为CSS

赞(0）回复(0）举报 2023-01-01

wvt8vs2t2#

其他答案也可能是工作

试试这个

要将CSS模块与Next.js一起使用，请将以下内容添加到next.config.js文件以启用CSS加载程序：

const withCSS = require('@zeit/next-css');
module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  },
});

赞(0）回复(0）举报 2023-01-01

g2ieeal73#

您可以像这样使用样式[“big_title”]

// ./header.js

import styles from "../styles/header.module.css";

export default function Header() {
    return (
        <header>
            <p className={styles["big_title"]}>Test</p>
        </header>
    )
}

赞(0）回复(0）举报 2023-01-01

y0u0uwnf4#

可能是烤肉串的问题，试试 Camel 牌吧。

<p className={styles.bigTitle}>Test</p>

.bigTitle {
    color: red;
}

赞(0）回复(0）举报 2023-01-01

我来回答

javascript CSS模块不应用样式- next.js 13

4条答案

试试这个

相关问题

热门标签

最新问答