what is the usage for webpack

[minooo]

I do not know how to use it with webpack. It is better to give a config :)

[borodean]

Hi @minooo!

As other PostCSS plugins, Assets with Webpack is configured with postcss-loader:

module.exports = {
  module: {
    loaders: [
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [
      require('postcss-assets')({
        loadPaths: ['images/']
      })
    ];
  }
}

[minooo]

Thank you!

[PetrShypila]

Is it still the right answer? I am trying to attach postcss-assets but it doesn't seem to work at all. I have an image server at: ./src/agent/assets/duck-2.png Here is my webpack config for css:

{
  test: /(\.css)$/,
  include: path.resolve(__dirname, 'src'),
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          require("postcss-assets")({
            loadPaths: ["common/assets/", 'agent/assets/'],
            relativeTo: 'src',
          }),
          require('./server/camelizeSelectors'),
          require('postcss-modules-local-by-default')(),
          require('postcss-import')({path: path.resolve(__dirname, 'src')}),
          require('postcss-image-set-polyfill')(),
          require('postcss-color-function')(),
          require('postcss-cssnext')(),

        ]
      }
    }
  ]
}

As you can see above I use plenty of plugins but only postcss-assets doesn't seem to be working. I have following css file:

@import "common/styles/theme.css";

html,
body {
  background: resolve('duck-2.png');
}

html,
body,
body * {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: content-box;

  font-family: "Roboto", sans-serif;
}

And for some reason in compiled CSS file I still see property unresolved:

html,
body {
  background: resolve('duck-2.png');
}

I did some debugging of plugin and the only thing I found is that I pass into plugins Processor object of following structure:

Processor {
  version: 5.2.18,
  plugins: [function#appendInputDir(css), function#(css)],
  postcssPlugin: postcss-assets,
  postcssVersion: 5.2.18
}