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

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

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.

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.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

angularsen commented on Aug 7, 2018

ryanfitzer commented on Mar 27, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions