css - Next.JS:使用全局 scss 中的 SASS 变量

Question

我有一个带有 main.scss 的 Next.js 应用程序在 pages/_app.js 中导入的全局 css 文件文件。

_app.js

import '../global-styles/main.scss'

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

此文件中的样式有效。

我还使用 [component].module.scss 将一些模块化 scss 文件附加到组件。

我在我的 variables.scss 中写了一个变量文件，我的文件之一 @import在 main.scss ,

变量.scss

$mobile: 750px;

main.scss

@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 中声明的全局变量没有通过？

Answer 1

与Next.js无关，与sass-loader的方式有关作品。
每次从 js 文件导入 scss 文件都被视为 孤立 sass env，因此，没有“全局变量”这样的东西。

此行为需要您导入 variables.scss从使用其中一个变量的每个 scss 文件中提取文件。

旁注，重要的是这些常见的scss文件(例如您的 variables.scss )将不包含“常规” css，因为如果是这样，它们将被重复多次(导入量)。