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 配置中。

我有类似但相反的选项，我为所有导入启用module: true，对于我希望在（即全局）中被视为常规css的所有文件，我需要添加.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 导入，但有一些限制。

Answer 2

只是想知道您是否已经成功地完成了这项工作？

我设法接近了类似于 Felix 的答案，即让 .module.scss 和 .scss 文件与 .css 一起工作，仅在 .scss/.module.scss 文件中的 @imports 中工作。真的希望能够在从组件导入时使 .css 文件正常工作。

下面我的 next.config.js 文件供参考

const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const withSourceMaps = require('@zeit/next-source-maps');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 2,
    localIdentName: '[local]___[hash:base64:5]',
  },
  webpack: config => {
    config.module.rules.forEach(rule => {
      if (rule.test && rule.test.toString().match(/\.(sa|sc)ss$/)) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === 'string') {
            return { loader: useRule };
          }

          if (useRule.loader.startsWith('css-loader')) {
            return {
              oneOf: [
                {
                  test: new RegExp(/\module.(sa|sc)ss$/),
                  exclude: new RegExp(/\.css$/),
                  loader: useRule.loader,
                  options: useRule.options,
                },
                {
                  loader: useRule.loader,
                  options: {},
                },
              ],
            };
          }
          return useRule;
        });
        delete rule.use;
      }
    });

    return config;
  },
};

module.exports = withPlugins(
  [[withSourceMaps], [withSass, sassConfig]]
);