Webpack предотвращает выброс css для некоторых файлов с модулями css - PullRequest
Новая
       43

Webpack предотвращает выброс css для некоторых файлов с модулями css

0 голосов
/ 11 апреля 2020

Я пытаюсь настроить веб-пакет таким образом, чтобы для определенных файлов . css он не излучал css (ничего не добавляет к стилям. css), но выдает локальные (className для сопоставления стилей в импортированном объекте в js). В css -loader modules опция всегда включена (она же CSS Модули ). Например:

В некоторых . js файле: 

import cssNoEmit from './styles.noemit.scss'
import cssEmit from './styles.scss'

содержимое styles.noemit.s css: 

.testNoEmit {
  background: orange;
}

содержимое styles.s css: 

.testEmit {
  background: blue;
}

Чего я хочу добиться, так это того, что окончательно сгенерировано . css содержит .testEmit только класс. Кроме того, и cssNoEmit, и cssEmit содержат сопоставления с соответствующими классами в сгенерированном . css

Это может быть возможно решить с помощью extract-text-plugin, но я Я не ищу это решение, так как этот плагин устарел.

Вот что я попробовал:

Все попытки имеют воспроизводимые примеры здесь

РЕДАКТИРОВАТЬ : попытки 1 (благодаря @ felixmo sh) и 5 ​​удалось выполнить.

Попытка 1 (рабочая) . css -loader имеет опцию onlyLocals. Описание в css -loader документации очень расплывчато, но, насколько я понимаю, оно должно делать то же самое, чего я пытаюсь достичь. 

  {
    test: /\.noemit\.scss$/,
    use: [
      //MiniCssExtractPlugin.loader, // after disabling this, it started to work
      {
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            exportGlobals: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            context: path.resolve(__dirname, 'src'),
            hashPrefix: '_',
          },
          importLoaders: 2,
          onlyLocals: true, // setting this to true causes transpilation to crash
        },
      },

      ...

    ],
  },

Попытка 5 (работает, не идеально) . Попытка использовать встроенную функцию веб-пакета, SplitChunksPlugin. Я попытался создать конфигурацию для этого варианта использования на основе this , SplitChinksPlugin docs , this , this . 

  ...

  optimization: {
    splitChunks: {
      cacheGroups: {
        groupUnusedStyles: {
          name: "unusedStyles",
          chunks: "all",

          test: /\.noemit\.scss$/,

          enforce: true
        },
      }
    }
  }

Этот подход перенаправляет нежелательные css в unusedStyles. css

Он работает с одним небольшим, но неприятным недостатком. Помимо unusedStyles. css он генерирует unusedStyles. js, и его необходимо включить в html, иначе приложение не запустится.

Чтобы быть более точным c, оба блока имеют быть внутри html: 

  <script type="text/javascript" src="/app.bundle.js"></script>
  <script type="text/javascript" src="/unusedStyles.bundle.js"></script>

Кто-нибудь знает, как заставить его работать без добавления другого пакета?

Попытка 2 (не работает) . Не используйте настройку onlyLocals и пропустите загрузчик, который отвечает за «css output» (например, style-loader или mini-extract-css-plugin). В этом случае содержимое импортированных css очень странно

strange contents of the imported object in javascript

Попытка 3 Попытка 2 (не работает) null-loader тоже не работает, так как импортирует только пустой объект

Попытка 4 Попытка 2 (не работает) . Есть другая идея: 

class ServerMiniCssExtractPlugin extends MiniCssExtractPlugin {
  getCssChunkObject(mainChunk) {
    return {};
  }
}

... // use ServerMiniCssExtractPlugin the same way as MiniCssExtractPlugin

Это не работает, потому что final . css имеет все стили, как если бы использовался обычный MiniCssExtractPlugin

Также, там - связанная тема на github.

1 Ответ

1 голос
/ 11 апреля 2020

Ваша первая попытка правильная, просто удалите MiniCssExtractPlugin.loader из списка загрузчиков noemit.scss.

Я пробовал локально, все работает, out css содержит только none " noemit "файлы, но существует сопоставление объектов css -modules для обоих.

Удаленный загрузчик (MiniCssExtractPlugin) - это тот, который отвечает за включение s css в окончательный файл css.

...