Community Feedback Requested

Hi, everyone. One of the biggest points of confusion with Laravel Mix stems from the fact that it will automatically rewrite your CSS urls(). Now, this is simply a Webpack feature, and has nothing to do with Mix, specifically; however, I understand that it can be confusing to newcomers.

An Example

Imagine that we want to compile a bit of Sass.

.example {
    background: url('../images/thing.png');
}

Notice that relative URL (absolute URLs are always ignored, of course)? Well, by default, Laravel Mix and Webpack will find thing.png, copy it to your public/images folder, and then rewrite the url(). As such, your compiled CSS will be:

.example {
  background: url(/images/thing.png?d41d8cd98f00b204e9800998ecf8427e);
}

This, again, is a very cool feature of Webpack’s. However, it does have a tendency to confuse folks who don’t understand how Webpack and the css-loader plugin works. It’s possible that your folder structure is already just how you want it, and you’d prefer that Mix not modify those url()s. If that’s the case, we do offer an override:

mix.options({
    processCssUrls: false
});

With this addition to your webpack.mix.js file, we will no longer match url()s or copy assets to your public directory. As such, the compiled CSS will remain exactly as you typed it:

.example {
  background: url("../images/thing.png");
}

My Question

Should we disable CSS url() processing by default, for the next point release? Or, in other words, should CSS rewriting be opt-in, rather than opt-out?

I ask, because this is easily the most common point of confusion for folks switching from Laravel Elixir to Laravel Mix and Webpack.

[kduma]

For me, opt-out. And the config line should be in mix config file, but commented.

[sergeifilippov]

Vote: Opt-out + docs + comments.

Since laravel-mix is a new direction with use of webpack as the core technology vs laravel-elixir and gulp, webpack defaults should be adhered to. This will help reduce confusion in the long run especially if people end up reading webpack documentation.

Newbies should read the documentation.