CODEWITHSUNDEEP
webpacksasswebpack-4webpack-style-loader
PierBJX
PierBJX

Reputation: 2353

Add "fake" url in sass with wepack

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 ?

Upvotes: 0

Views: 160

Answers (1)

user7364588
user7364588

Reputation: 1154

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;
}

Upvotes: 1

Related Questions