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

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

0 голосов
/ 23 мая 2018

Я использую модули CSS с webpack css-loader, затем связываю их с помощью 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, а ко всему пакету.Как мне этого добиться?

Ответы [ 3 ]

0 голосов
/ 07 июля 2018

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

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

0 голосов
/ 09 июля 2018

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

new OptimizeCssAssetsPlugin({
  cssProcessor: postcss([CSSMQPacker]),
}),
0 голосов
/ 06 июля 2018

Вы ссылаетесь на другой 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 ничего не знает о разрешении пути в веб-пакете.

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

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