postcss-url

postcss-url copied to clipboard

This adds a relative option allowing to prepend ./ in front of the rebased URL.

This is needed to rebase paths after postcss-import and keep the imports relative to the root style.css.

This allows the following structure to work:

src/styles
├── index.css
└── webfonts
    ├── opensans
    │   ├── index.css
    │   └── open-sans-v14-latin-regular.woff2
    └── unineue
        ├── index.css
        └── UniNeueLight.woff2

src/styles/index.css

@import "./webfonts/opensans";
@import "./webfonts/unineue";

...

src/styles/webfonts/opensans/index.css

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: normal;
  src: url("./open-sans-v14-latin-regular.eot");

...

Using postcss with the following configuration:

webpack.config.js

...
      {
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-import'),
                require('postcss-url')({ relative: true }),
              ],
            },
          },
        ],
      },
...

Hi @derekstavis maybe you need to use custom function

require('postcss-url')([
  { url: 'rebase' }
  // postprocessing with 'custom' function
  { url: (asset) => `./${asset.url}`, multi: true }
])

I added flag multi especially for corner cases

Sorry, documentation is not clearly