Next.js组件无需modules导入CSS/SCSS/SASS/LESS文件的实现方法咨询

实现方案 #

前置依赖安装 #

先安装SASS基础依赖：

npm install sass --save-dev

修改Next.js配置 #

在项目根目录的next.config.js中添加如下配置，即可解除默认的「全局样式只能在根入口导入」限制：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    // 若使用App Router则保留该项，Pages路由可删除
    appDir: true,
    // 关闭默认的CSS优化限制
    disableOptimizedCssLoading: true,
  },
  webpack: (config) => {
    // 移除全局CSS导入的位置限制规则
    const cssRules = config.module.rules
      .find(rule => typeof rule.oneOf === "object")
      .oneOf.filter(rule => Array.isArray(rule.use));

    cssRules.forEach(rule => {
      rule.use.forEach(loader => {
        if (
          loader.loader?.includes("next/dist/build/webpack/loaders/css-loader/src") &&
          !loader.loader?.includes("postcss-loader")
        ) {
          delete loader.options.modules.mode;
        }
      });
    });

    return config;
  },
};

module.exports = nextConfig;

配置完成重启项目后，就可以直接在任意组件层级导入普通.scss/.css文件，和你之前使用@zeit/next-sass的用法完全一致。

LESS支持拓展 #

如果需要支持LESS文件导入，额外安装对应依赖：

npm install next-with-less less less-loader --save-dev

再将next.config.js的导出修改为如下格式即可：

const withLess = require("next-with-less");

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 上方的原有配置保持不变
  reactStrictMode: true,
  experimental: {
    appDir: true,
    disableOptimizedCssLoading: true,
  },
  webpack: (config) => {
    // 上方的webpack配置保持不变
    return config;
  },
  // 可选：配置LESS全局变量等参数
  lessLoaderOptions: {
    lessOptions: {
      modifyVars: {},
    },
  },
};

module.exports = withLess(nextConfig);

注意事项 #

该配置下导入的非.module.*后缀的样式均为全局生效，若要避免样式冲突，需要手动给组件样式类添加唯一前缀，或配合BEM等命名规范使用。
若使用App Router，在服务端组件中直接导入样式可能不生效，给对应组件顶部添加'use client'标记即可。

内容的提问来源于stack exchange，提问作者Katharsin