Как включить модули CSS только для файлов .mod.css? Nextjs - PullRequest
Новая
       70

Как включить модули CSS только для файлов .mod.css? Nextjs

0 голосов
/ 23 декабря 2019

В моем проекте используются два типа файлов стилей .css файлы и .mod.css файлы. Я хочу включить модули CSS только для файлов с расширением *.mod.css.

My next.config.js file 

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
      cssModules:true,
      cssLoaderOptions: {
        localIdentName: "[local]_[hash:base64:5]",
      },
      webpack(config, options) {
        config.module.rules.push({
          test: /\.mod.css$/,
        })
        return config
      }
})

1 Ответ

0 голосов
/ 24 декабря 2019

Поскольку плагин withCss next определяет загрузчики css, вам нужно изменить его вместо добавления нового. 

// next.config.js

const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    localIdentName: '[local]_[hash:base64:5]',
  },
  webpack(config, options) {

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

          return useRule;
        });

        delete rule.use;
      }
    });    


    return config;
  },
});

Этот код ищетwithCss config и изменяет правила для использования опции oneOf в веб-пакете.

...