Как избежать дублирования классов, используя splitchunks с модулями css, имеющими операторы @imports - PullRequest
Новая
       34

Как избежать дублирования классов, используя splitchunks с модулями css, имеющими операторы @imports

0 голосов
/ 03 мая 2019

У меня есть приложение nextjs, использующее модули css (стилус).Я импортирую файлы стилей в соответствующие компоненты, используя импорт es6, как показано в коде.Эти импортированные файлы стилуса имеют общие операторы @import, как показано в коде.

Я пытаюсь сгенерировать два фрагмента CSS, используя splitchunks.1) main.css (здесь будут все распространенные классы css main.styl).2) app.css (здесь будут все компоненты css)

Я попробовал конфигурацию splitchunk с mini-css-extract-plugin, как показано в коде.

Я могусгенерируйте main.css с нижеуказанным конфигом правильно, но app.css имеет много повторяющихся (дублирующих) общих классов (из main.styl) вместе с классами компонентов.

Пример файла стилуса (как этот Iесть много файлов компонентов) 

@import '../../layout/main/main.styl'

.search-main-part
  min-height 500px

...

Пример файла JS (Как и у меня много компонентов) 

...
import styles from './search.styl';
...

<div className={styles['pt-20']}>
...
</div>
...

Конфигурация Splitchunk 

config.optimization = Object.assign({}, config.optimization, {
  splitChunks: Object.assign({}, config.optimization.splitChunks, {
    cacheGroups: Object.assign({}, config.optimization.splitChunks.cacheGroups, {
      main: {
        name: 'main',
        test: (m, c) => {
          return m.constructor.name === 'CssModule' && m._identifier.indexOf('main') !== -1;
        },
        priority: 2,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      },
      app: {
        name: 'app',
        test: (m, c) => {
          return m.constructor.name === 'CssModule' && m._identifier.indexOf('main') === -1;
        },
        priority: 3,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      }
    })
  })
});

app.cssдолжен иметь только классы компонентов

...