javascript - NextJS 与 CSS/SCSS 加载器

Question

我对 NextJS 完全陌生，正在尝试它的 SSR 功能。我想设置加载器，可以将 4 种类型的文件加载到应用程序中:

1. *.module.css;
2. *.module.scss;
3. *.css;
4. *.scss;

1 和 2 加载了 CSS 模块，3 和 4 加载了常规 CSS/SCSS。如何使用 @zeit/next-css 和 @zeit/next-sass 执行此操作？

Answer 1

目前 next-css/next-sass 不支持此功能，但您可以自行将其添加到 webpack 配置中。

我有类似但相反的选项，我为所有导入和所有我想被视为常规CSS的文件(即全局)启用module: true，我需要添加，.global后缀。

这是我对 webpack 配置的修改:

// next.config.js
config.module.rules.forEach(rule => {
  if (rule.test && rule.test.toString().includes('.scss')) {
    rule.rules = rule.use.map(useRule => {
      if (typeof useRule === 'string') {
        return {
          loader: useRule,
        };
      }
      if (useRule.loader.startsWith('css-loader')) {
        return {
          oneOf: [
            {
              test: /\.global\.scss$/,
              loader: useRule.loader,
              options: {
                ...useRule.options,
                modules: false,
              },
            },
            {
              loader: useRule.loader,
              options: useRule.options,
            },
          ],
        };
      }

      return useRule;
    });

    delete rule.use;
  }
});

这段代码查找 css-loader 配置并修改它以支持 .global.scss 后缀。

顺便说一句，您可以通过关注 this PR 获取更新

编辑

下一个版本 ^9.2.0 现在有 native support for css进口有一些限制。