css-loader-relative

css-loader replace url to relative path

https://github.com/xxxxst/css-loader-relative

//input 
@import "/src/assets/css/style.css"
.home{background: url("/static/image.png");}
//output 
@import "assets/css/style.css"
.home{background: url("./static/image.png");}

Install

npm install --save-dev css-loader-relative

Usage

keep this plugin before scss-loader

Vue

build/utils.js

exports.cssLoaders = function(options) {
    options = options || {}
    const cssLoader = { ... }
 
    const cssLoaderRelative = {
        loader: 'css-loader-relative'
    }
 
    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS
            ? [cssLoader, postcssLoader]
            : [cssLoader];
        
        if(loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            });
            // add plugin at here
            loaders.push(cssLoaderRelative);
        }
        ...
    }
}

License

MIT

Copyright (c) 2018-present, xxxxst