Question

我对NextJS完全陌生，尝试使用其SSR功能。我想设置加载程序，将4种类型的文件加载到应用程序中：

*.module.css;
*.module.scss;
*.css;
*.scss;

1和2加载了CSS模块，而3和4加载了常规的CSS / SCSS。我该如何使用@zeit/next-css和@zeit/next-sass来做到这一点？

Answer 1

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

我设法接近了与Felix的答案类似的方法，以使.module.scss和.scss文件仅与.scss / .module.scss文件中的@imports一起使用.css。从组件导入时，确实希望能够使.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]]
);

Answer 2

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

我有类似但相反的选择，我正在启用module: true以及所有我想被视为常规css的文件（即全局），我需要添加{{1} }前缀。

这是我对webpack配置的修改：

.global

这段代码寻找// next.config.js config.module.rules.forEach(rule => { if (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后缀。

顺便说一句，您可以按照this PR

进行更新

具有CSS / SCSS加载器的NextJS

2 个答案: