Add "fake" url in sass with wepack

Question

In my project, I have some scss and with webpack I can build and bundle everything properly. In my scss file, I have some url to get some images. Such like that:

background-image: url(../img/example.svg),

This can be done thanks to these loaders in webpack: file-loader, sass-loader, css-loader and minicssextractplugin. Here is the working webpack config:

{
    module: {
        rules: [
            {
                test: /\.s?[ac]ss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                    }
                ],
            },
            {
                test: /\.(svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 8192
                        },
                    }
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ]
}

My problem is that in the output folder (dist), I have all the images (see below the tree).

dist
 |---- bundle.js
 |---- bundle.css
 |---- images
         |---- example.svg

My idea is set the url like a fake url but I don't want sass to resolve the url and load the images. I just want to add the url as it is and don't want it to check the given path. Do you konw how if it is possible ?

If you are using the dist folder to test your development, follow dist/ folder structure when using path into your css files. Try using img/example.svg instead. The bundle path will look at path/to/project/dist/images/example.svg. — user7364588
In this a package. So I do 'npm install myModule' and everything is added in node_modules. This is why, I don't need the assets to be copied in the dist because I will add it manually in the other project in the src/images/example.svg. I have tried and it is not working because he does not find the file. @user7364588 — PierBJX

user7364588 user7364588 · Accepted Answer · 2019-11-22T16:02:33

From what i understand after your precisions, you have two projects child_project and root_project, and this is your goal :

child_project                                 root_project
    dist                                           dist
    |-- bundle.js                                 |---- main.js
    |-- bundle.css <---- import -------------  |---- main.css
               |                                     |---- img
               |----------- use -------------------->   |----- example.svg

You want to use a file from root_project into child_project.

Specifically, you want the background-image property from child_project/dist/bundle.css using root_project/dist/img/example.svg file.

The path dependency that you are creating will lead you to many problems.

I encourage you to avoid this kind of dependency.

This current technical choice today may slow/break your project evolution.

A technical alternative could be to provide some function into the child_project that let any root_project to set specific url/theme.

This is not a direct solution to your problem but trying to help solving it.

EDIT:

A direct solution could be to provide this function into child_project module, accessible from outside for root_project :

// Set background image for each element that match 'class_name' class
function set_class_background_image(class_name, url) {
    const elems = document.getElementsByClassName(class_name);
    elems.forEach(x => { x.style.background_image = url; });
}

// Set background image for the element that match 'id' id
function set_id_background_image(id, url) {
    const elem = document.getElementById(id);
    elem.style.background_image = url;
}

Add "fake" url in sass with wepack

1 Answers