Rebase URL does not work on .css file in webpack 4, but works with .less files

[angularsen]

I am probably just confused about something, but for some reason I can't get URL rebase to work with .css files - only with .less files. If I rename a .css file to .less, it works.

I have setup a .less rule and a .css rule, where the only difference is running less-loader. Even if I let the .less rule also handle .css files it does not rebase the URLs for @imported .css files - it only works with .less files.

Any ideas what I'm doing wrong?

I have these two rules:

{
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        url: false
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('postcss-url')({
            url: 'rebase',
            assetsPath: root('dist')
          })
        ]
      }
    },
    {
      loader: 'less-loader',
      options: {
        paths: [
          rootDir
        ],
        plugins: [
          require('less-plugin-glob')
        ]
      }
    }
  ]
},
{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        url: false,
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('postcss-url')({
            url: 'rebase',
            assetsPath: root('dist')
          })
        ]
      }
    }
  ]
}

And this is an example .less file I have as entry point in my webpack config.

my-styles.less

@import "../../Content/Themes/theme.css";
//@import "../../Content/Themes/theme.less"; // URL rebase works if I rename file to .less

[angularsen]

Updated the description after I learned that running less-loader did not have any effect as I first thought. It seems to be something with the file extension and how postcss-loader and possibly css-loader works, that has a different behavior for .css vs .less files.

[ryanfitzer]

Just ran into this as well (that rebase isn't working in Webpack 4). Haven't figured out why. Just used the url: {function} option to do the url rewrite. Hopefully the fix in postcss-url is easy. Doesn't seem to must activity in this repo.