Question

我有一个Next.js应用程序，其中在main.scss文件中导入了一个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的文件之一，

variables.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，因此，没有这样的“全局变量”。

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

旁注，重要的是，这些常见的scss文件（例如您的variables.scss）将不包含“常规” css，因为如果这样，它们将被复制很多次（进口量）。

Answer 2

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

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

更新：

在next.config.js文件中需要添加这个代码（如果没有这个文件就需要自己创建）

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

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

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

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

Answer 3

只需将此添加到您的 next.config.js 文件并重新启动

const path = require('path')
    
    module.exports = {
        sassOptions: {
          includePaths: [path.join(__dirname, 'styles')],
          prependData: `@import "main.scss";`
        }
    }

Answer 4

我通过将全局变量添加到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;
  `,

  },
};

您可以点击以下链接获取答案：https://github.com/vercel/next.js/pull/12277

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

4 个答案: