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