Использование postcss-loader после css-loader

Я использую модули CSS с css-loader webpack, а затем связываю их с помощью mini-css-extract-plugin. Вот как выглядит моя конфигурация:

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

По какой-то причине (см. Раздел комментариев) мне бы очень хотелось применить postcss-loader не к каждому отдельному файлу .css, а ко всему пакету. Как я могу этого добиться?


webpack css-modules css-loader postcss-loader
person Grundiss    schedule 23.05.2018    source источник
comment
Каждый модуль css инкапсулирует в себе все медиа-запросы, на которые компонент должен отвечать. И я хотел бы использовать css-mqpacker, чтобы объединить их вместе. На самом деле в моей текущей конфигурации все работает, но css-mqpacker работает с одним конкретным файлом .css. И я хочу применить материал postcss ко всему пакету   -  person Grundiss    schedule 23.05.2018

Ответы (3)


arrow_upward
4
arrow_downward

Спасибо всем за попытку решить мою проблему. В конце концов, я нашел решение. Я больше не использую postcss-loader, а вместо этого использую OptimizeCssAssetsPlugin вот так:

new OptimizeCssAssetsPlugin({
  cssProcessor: postcss([CSSMQPacker]),
}),
person Grundiss    schedule 09.07.2018
comment
Большое спасибо! Вероятно, это единственный намек в Интернете. Теперь я использую ваше решение из-за совместного использования postcss-css-variables между файлами. У меня только одна проблема ... при использовании postcss-loader я могу правильно получать предупреждения типа variable --xyz is undefined and used without a fallback, но при переключении с postcss-loader на ваше решение через плагин предупреждения полностью проглатываются, поэтому я не могу обнаружить возможные проблемы. Не могли бы вы мне помочь с этим? - person mikep; 10.06.2020
comment
Следующая проблема - не работает исходная карта, а также время сборки во время просмотра идет медленно, потому что он обрабатывает все файлы снова и снова, а не только один измененный. Так что я думаю, мне не следует идти этим путем. - person mikep; 10.06.2020

arrow_upward
0
arrow_downward

Ссылаетесь ли вы на другой свой CSS с помощью @import?

Я пытался сделать то же самое для объединения повторяющихся селекторов CSS. У меня был умеренный успех при использовании postcss-import. Он объединит весь ваш импорт, чтобы вы могли обработать его с помощью postcss до того, как css-loader все это объединит.

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[name]-[local]_[hash:base64:5]'
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('postcss-import'),
                    require('css-mqpacker')
                ]
            }
        }
    ]
}

К сожалению, это может привести к проблемам с путями к ресурсам, поскольку postcss ничего не знает о разрешении пути webpack.

Вы можете обойти это с помощью псевдонимов. 


require('postcss-import')({
    resolve: id => id.replace(/^~?(@example-alias)/, path.resolve(__dirname, './src'))
}),
Надеюсь, это поможет. Я тоже хотел бы более простое решение с помощью css-loader. В идеале: импортировать и комбинировать (css-loader)> postcss> bundle (css-loader)

person Bierson    schedule 06.07.2018

arrow_upward
0
arrow_downward

Вы можете написать плагин webpack для запуска в пакете css и применить к нему плагин postCss.

Вы можете проверить в качестве ссылки какой-нибудь плагин, который я написал: https://github.com/wix-incubator/extract-tpa-style-webpack-plugin/blob/master/src/index.js#L71

person felixmosh    schedule 07.07.2018