Блог

Я совершенно новичок в NextJS, пробую его функции SSR. Я хочу настроить загрузчики, в которые я могу загружать файлы 4 типов в приложение:

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

1 и 2 загружаются с помощью модулей CSS, а 3 и 4 — как обычные CSS / SCSS. Как я могу это сделать с @zeit/next-css помощью and @zeit/next-sass ?

В настоящее next-css время / next-sass не поддерживают эту функцию, но вы можете добавить ее самостоятельно в конфигурацию webpack.

У меня похожий, но противоположный вариант, я включаю module: true для всего импорта и для всех файлов, которые я хочу обрабатывать как обычный css (т.Е. Глобальный), Мне нужно добавить, .global суффикс.

Это моя модификация конфигурации webpack:

 // next.config.js
config.module.rules.forEach(rule => {
  if (rule.test amp;amp; 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 суффикса.

Кстати, вы можете получать обновления, следуя этому PR

Редактировать

Следующая версия ^ 9.2.0 теперь имеет встроенную поддержку импорта css с некоторыми ограничениями.

просто интересно, удалось ли вам заставить это работать?

Мне удалось приблизиться к чему-то похожему на ответ Феликса, чтобы получить файлы .module.scss и .scss, работающие с .css, работающие только в @imports в файле .scss /.module.scss. Действительно хотелось бы иметь возможность получать файлы .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 amp;amp; 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]]
);