Nextjs - Global.css 样式不适用于页面/组件

Question

我是新来的nextjs

我有一个css课程styles/globals.css：

.section-sidebar-filter-name {
  margin: 0 0 .5rem;
}

我的import声明如下pages/_app.js：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
...

};

但当我在 chrome 浏览器开发者模式下查看它时，类CSS样式并未应用于( )：react componentspagesExample: test.js page

function Test() {

   return(
      <h3 className="c-clickable section-sidebar-filter-name">Test</h3>
   )

}

next.config.js：

module.exports = {
    webpack: (config) => {
        const rules = config.module.rules
            .find((rule) => typeof rule.oneOf === 'object')
            .oneOf.filter((rule) => Array.isArray(rule.use));

        rules.forEach((rule) => {
            rule.use.forEach((moduleLoader) => {
                if (moduleLoader.loader.includes('css-loader') && !moduleLoader.loader.includes('postcss-loader')) {
                    delete moduleLoader.options.modules.getLocalIdent;
                    moduleLoader.options = {
                        ...moduleLoader.options,
                        modules: {
                            ...moduleLoader.options.modules,
                            localIdentName: '[folder]__[local]--[hash:base64:5]',
                            // getLocalIdent: (context, localIdentName, localName, options) => {
                            //     return "whatever_random_class_name";
                            // },
                            // You can also add other css-loader options here
                        }
                    };
                }
            });
        });

        return config;
    }
};

有人知道我做错了什么吗？

Answer 1

您需要使用以下代码在页面目录（_app.js）内创建一个文件：-

\n

export default function App({ Component, pageProps }) {\n return <Component {...pageProps} />    \n}    \n

\n

该应用程序组件是顶级组件，在所有不同页面中都是通用的。例如，您可以使用此应用程序组件在页面之间导航时保​​持状态。

\n

在Next.js中，您可以通过从pages/_app.js导入全局CSS文件来添加它们。您无法在其他任何地方导入全局 CSS。

\n

全局CSS无法在pages/_app.js之外导入的原因是全局CSS会影响页面上的所有元素。

\n

如果您要从主页导航到 /posts/first-post 页面，主页的全局样式会无意中影响 /posts/first-post 。

\n

您可以将全局 CSS 文件放置在任何位置并使用任何名称。因此让\xe2\x80\x99s 执行以下操作：

\n

创建一个顶级 styles 目录并在其中创建 global.css。\n将以下内容添加到 styles/global.css。它重置一些样式并更改 a 标签的颜色：

\n

html,\nbody {\n padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,\nCantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n  line-height: 1.6;\n  font-size: 18px;\n  }    \n\n* {\n  box-sizing: border-box;\n}\n\n   a {\n color: #0070f3;\n text-decoration: none;\n  }\n\na:hover {\n text-decoration: underline;\n   }\n\n img {\n max-width: 100%;\n display: block;\n}    \n

\n

最后，打开pages/_app.js添加导入CSS文件，如下所示：

\n

import '../styles/global.css'\n\nexport default function App({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}    \n

\n