Next.js引入全局sass变量

Next引入全局sass变量

next.js 默认暴露的webpack sass-loader 配置没有包括additionalData配置，只能自己匹配规则，添加option.做法如下

//next.config.js
const regexEqual = (x, y) =>
  x instanceof RegExp &&
  y instanceof RegExp &&
  x.source === y.source &&
  x.global === y.global &&
  x.ignoreCase === y.ignoreCase &&
  x.multiline === y.multiline;

  module.exports = {
    optimizeFonts: false,
  reactStrictMode: true,
  webpack(config) {
    const sassRules = config.module.rules
      .find((rule) => typeof rule.oneOf === "object")
      .oneOf.find(
        (rule) =>
          rule.sideEffects === false &&
          regexEqual(rule.test, /\.module\.(scss|sass)$/)
      );
    sassRules.use = sassRules.use.map((rule) =>
      rule.loader.includes("sass-loader")
        ? {
          ...rule,
          options: {
            ...rule.options,
            //引入你的全局样式
            additionalData: `@import '../styles/variables.scss';`,
          },
        }
        : rule
    );

    /* return new config to next */
    return config;
  },
  
  distDir: 'dist',
}