Nextjs - Global.css 样式未在页面/组件上应用/工作

Question

我是nextjs的新手

我在styles/globals.css 中有一个css 类：

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

我在pages/_app.js 中有import 声明：

import '../styles/globals.css'

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

};

但是当我在 chrome 浏览器开发者模式 (Example: test.js page ) 中查看 pages 中的 react components 时，CSS 类样式并不适用：

function Test() {

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

}

下一个.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

您需要使用以下代码在 pages 目录 (_app.js) 中创建一个文件：-

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

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

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

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

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

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

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

html,
body {
 padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  }    

* {
  box-sizing: border-box;
}

   a {
 color: #0070f3;
 text-decoration: none;
  }

a:hover {
 text-decoration: underline;
   }

 img {
 max-width: 100%;
 display: block;
}    

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

import '../styles/global.css'

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