我的 React 应用程序运行良好，也使用全局 CSS。
我跑了npm i next-images，添加了一张图片，编辑了next.config.js, ran npm run dev，现在我收到了这条消息
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
我已经检查了文档，但我发现这些说明有点令人困惑，因为我是 React 的新手。
另外，为什么现在会发生这个错误？你认为这与 npm install 有什么关系吗？
我试图删除我与他们的代码一起添加的新文件，但这并不能解决问题。我也尝试过阅读更多：建议的内容。
我的最高层组件。
import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';
const Layout = (props) => (
<div>
<Head>
<title>Bitcoin Watcher</title>
</Head>
<Navbar />
<div className="marginsContainer">
{props.children}
</div>
</div>
);
export default Layout; …我有一个 Next.js 应用程序，其中main.scss导入了一个全局 csspages/_app.js文件。
_app.js
import '../global-styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
此文件中的样式有效。
我还有一些附加到组件的模块化 scss 文件，使用 [component].module.scss。
我在写一个变量variables.scss文件，其中一个文件，我@import在main.scss，
变量.scss
$mobile: 750px;
主文件
@import './fonts.scss';
@import './variables.scss';
@import './global.scss';
但是，当我尝试在我的模块化 css 中使用此变量时，出现错误
./module-styles/navbar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-3-1!./node_modules/postcss-loader/src??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-3-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-4!./module-styles/navbar.module.scss)
SassError: Undefined variable: "$mobile".
on line 19 of /Users/Parv/Documents/reactx/module-styles/navbar.module.scss
>> @media (max-width: $mobile) {
---------------------------^
我的问题是，为什么我在 main.scss 中声明的全局变量没有通过？
想知道 Chrome 上的 React Dev Tool 在检查时检测到多个单个字母是否正常？
我试图检查一些网站，以更好地了解优秀的公司如何构建和编写他们的 React 代码，但我所看到的只是诸如此类的东西<t> <y>。
这是我所看到的图像：
有人可以解释这是为什么吗？
我正在使用 React 和 SASS。
对于我的组件，我使用模块化 CSS，但是，在我的Layout.js文件中，我想使用一个main.scss文件。
当我向选择器（例如或 ）main.scss添加样式时，我的文件正在工作，它们对这些元素进行样式设置。这是似乎没有实现的类的样式。例如，在我的文件中，我有以下 cssbody {}p {}global.scss
body {
margin: 0;
}
.marginsContainer {
width: 90%;
margin: auto;
padding: 100px;
}
正在body工作。事实.mainContainer并非如此。
我正在尝试在 Layout.js 文件中使用 .mainContainer，如下所示
import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';
const Layout = (props) => (
<div>
<Head>
<title>Practise Site</title>
</Head>
<Navbar />
<div className="marginsContainer">
{props.children}
</div>
</div>
);
export default Layout;
这里可能有什么问题？