Измените localIdentName CSS-загрузчика в Nextjs, чтобы скрыть имена классов от пользователей.

Как я могу отредактировать поле localIdentName в css-loader в конфигурации Webpack в Nextjs, чтобы я мог хешировать / скрывать / скрывать имена классов css?

Пример ниже взят из New York Times. Обратите внимание на названия классов:

введите описание изображения здесь


webpack reactjs next.js css-modules css-loader
person user9408899    schedule 22.03.2021    source источник

Ответы (2)


arrow_upward
5
arrow_downward

К сожалению, в Nextjs нет встроенной поддержки для передачи пользовательской конфигурации Webpack загрузчикам. Но мы можем обойти это, используя next.config.js.

Сначала создайте next.config.js в корне каталога вашего проекта.

Если вы используете Webpack 5 или (Next.js 10.2 или более новую версию), используйте этот код:

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules[2].oneOf.forEach((moduleLoader, i) => {
      Array.isArray(moduleLoader.use) &&
        moduleLoader.use.forEach((l) => {
          if (
            l.loader.includes('\\css-loader') &&
            !l.loader.includes('postcss-loader')
          ) {
            const { getLocalIdent, ...others } = l.options.modules;

            l.options = {
              ...l.options,
              modules: {
                ...others,
                localIdentName: '[hash:base64:6]',
              },
            };
          }
        });
    });
    return config;
  },
};

В противном случае используйте это:

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules[1].oneOf.forEach((moduleLoader, i) => {
      Array.isArray(moduleLoader.use) &&
        moduleLoader.use.forEach((l) => {
          if (
            l.loader.includes('\\css-loader') &&
            !l.loader.includes('postcss-loader')
          ) {
            const { getLocalIdent, ...others } = l.options.modules;

            l.options = {
              ...l.options,
              modules: {
                ...others,
                localIdentName: '[hash:base64:6]',
              },
            };
          }
        });
    });
    return config;
  },
};

Если вы хотите хешировать имена классов только в производственной среде, вы можете использовать process.env.NODE_ENV с оператором if. Нравится:

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    if (process.env.NODE_ENV === "production") {
      ...
      ...

      return config;
    } else {
      return config;
    }
  },
};
person user9408899    schedule 22.03.2021
comment
Кто-нибудь знает, как это должно выглядеть для webpack 5? - person jebbie; 09.04.2021
comment
@jebbie Отредактировал ответ. Проверить это. - person user9408899; 23.05.2021
comment
@ user9408899 только что протестировал его, и он выводит css с хешированным именем, но html все тот же, поэтому имена классов не совпадают между html и css, есть ли у вас какие-либо идеи? - person Hieu Nguyen Trung; 19.06.2021

arrow_upward
0
arrow_downward

У меня это сработало с использованием Next.js 11:

module.exports = {
        webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.module.rules[3].oneOf.forEach((moduleLoader, i) => {
          Array.isArray(moduleLoader.use) &&
            moduleLoader.use.forEach((l) => {
              if (
                l.loader.includes('\\css-loader') &&
                !l.loader.includes('postcss-loader')
              ) {
                const { getLocalIdent, ...others } = l.options.modules;
    
                l.options = {
                  ...l.options,
                  modules: {
                    ...others,
                    localIdentName: '[hash:base64:6]',
                  },
                };
              }
            });
        });
          return config;
      },
    };
person iMega    schedule 26.06.2021