Next.JS：使用全局scss中的SASS变量

我有一个Next.js应用程序，它在

pages/_app.js

文件中导入了一个

main.scss

全局css文件

\u app.js

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

它与Next.js无关，而是与工作方式有关。 每次从js文件导入scss文件都被视为一个独立的sass env，因此不存在“全局变量”

此行为要求您从使用其中一个变量的每个scss文件导入

variables.scss

文件

---

请注意，这些常见的

SCS

文件（例如您的

变量.scss

）不包含“常规”css，这一点很重要，因为如果是这样，它们将被重复多次（导入量）。

我通过将全局变量添加到next.config.js来解决这个问题。这不是一个好的解决方案，但它是有效的

module.exports = {
  sassOptions: {
  includePaths: [path.join(__dirname, 'styles')],
  prependData: `
       $primary-font-regular: 'Gotham';
       $primary-font-medium: 'Gotham';
    
       $default-font-size: 16px;
    
       $h1: 5.208vw;
       $h4: 1.458vw;
    
       $primary-color: #000000;
       $gray: #CCCCCC;
  `,

  },
};

---

您可以通过以下链接获得答案：

更简单的方法是添加带有变量导入的文件，并将别名添加到tsconfig

sassOptions: {
    includePaths: ['./src'],
    prependData: `@import "~@styles/variable.scss";`,
}

更新：

在文件next.config.js中需要添加此代码（如果没有此类文件，则需要创建此代码）

在文件tsconfig.json中需要添加别名

"baseUrl": ".",
"paths": {
    ...
    "@styles/*": [
        "src/styles/*"
    ],
    ...

---

然后在variable.scss中创建路径为src/styles/variable.scss的样式文件。您可以导入其他scss文件

Hi Sergey，您介意添加设置tsconfig的方式吗？我尝试过按上面键入的方式添加它，但看起来Tconfig希望我们为每个属性名和对象名添加引号。您好，我更新了帖子，在Tconfig中，只需要为样式文件夹添加别名

module.exports = {
  sassOptions: {
  includePaths: [path.join(__dirname, 'styles')],
  prependData: `
       $primary-font-regular: 'Gotham';
       $primary-font-medium: 'Gotham';
    
       $default-font-size: 16px;
    
       $h1: 5.208vw;
       $h4: 1.458vw;
    
       $primary-color: #000000;
       $gray: #CCCCCC;
  `,

  },
};

sassOptions: {
    includePaths: ['./src'],
    prependData: `@import "~@styles/variable.scss";`,
}

module.exports = (phase, {defaultConfig}) => {
    if ('sassOptions' in defaultConfig) {
        defaultConfig['sassOptions'] = {
            includePaths: ['./src'],
            prependData: `@import "~@styles/variables.scss";`,
        }
    }
    return defaultConfig;
}

"baseUrl": ".",
"paths": {
    ...
    "@styles/*": [
        "src/styles/*"
    ],
    ...