Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature request] Custom path for CSS URL processing

See original GitHub issue

Laravel Mix Version: 0.11.4
Node Version (node -v): 7.9.0
NPM Version (npm -v): 4.2.0
OS: Windows 10 Pro (Version: 1703)

Description:

If we have relative paths in our CSS (and processCssUrls is true), then after the processing, these files are moved to /public/images or /public/fonts. Some people may not like that the files are moved to the root directory and want to move the files to the /public/assets/images, for example.

This path is hardcoded in setup/webpack.config.js:

if (! /node_modules|bower_components/.test(path)) {
    return 'images/[name].[ext]?[hash]';
}

return 'images/vendor/' + path
    .replace(/\\/g, '/')
    .replace(
        /((.*(node_modules|bower_components))|images|image|img|assets)\//g, ''
    ) + '?[hash]';

Steps To Reproduce:

There is no support for this.

A new config variable could be added to move the files to a custom directory.

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:6

Top GitHub Comments

8reactions

JeffreyWaycommented, May 23, 2017

I’d rather just stick with a common default for now.

0reactions

Froxzcommented, Dec 19, 2019

Top Results From Across the Web

[Feature request] Custom path for CSS URL processing #783

Just ran into this situation. The website is located in a sub-directory, so it is absolutely necessary to add "/base/path/" before the generated ......

How do I set a CSS url to an absolute location? - Stack Overflow

Try putting a leading slash on those paths to represent the root. ie use: url('/images/ClanSpider.png'). instead of

url() - CSS: Cascading Style Sheets - MDN Web Docs

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or...

resolve-url-loader - npm

A webpack loader that rewrites relative paths in url() statements based on the original source file. ; With webpack you can import a...

CSS URL Rewriting | Laravel Mix Documentation

One key concept to understand is that Mix and webpack will rewrite any url() s within your stylesheets. While this might initially sound...