Использование CSS-модулей с Webpack и Typescript - PullRequest
Новая
       33

Использование CSS-модулей с Webpack и Typescript

1 голос
/ 19 марта 2019

Я пытаюсь интегрировать модули CSS в мой проект, который использует Typescript и Next JS. Вот мои настройки: 

   module.exports = withCustomBabelConfigFile(
      withTypeScript(withCSS({ 
      cssModules: true,
        babelConfigFile: path.resolve("./babel.config.js"),
        webpack(config, options) {
          config.module.rules.push({
            test: /\.css$/,
            include: path.join(__dirname, 'pages/index.tsx'),
            use: [
              'style-loader',
              {
                loader: 'typings-for-css-modules-loader',
                options: {
                  modules: true,
                  namedExport: true,
                  camelCase: true
                }

              }
            ],
          })
          return config
        }
      }))
    );

Я пытаюсь использовать плагин typings-for-css-modules-loader, чтобы Webpack автоматически генерировал мои наборы TS для моего CSS.

Если я удаляю функцию withCSS() из моей конфигурации, набираются наборы, но модули CSS не работают, так как CSS не добавляется к элементам. Однако я сохраняю withCSS() в конфигурации, наборы не генерируются, но модули CSS работают.

Кто-нибудь ранее использовал конфигурацию Next JS в этой ситуации или знает, что я делаю неправильно?

Спасибо!

...