css-loader-relative

css-loader replace url to relative path

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

1//input
2@import "/src/assets/css/style.css"
3.home{background: url("/static/image.png");}
4//output
5@import "assets/css/style.css"
6.home{background: url("./static/image.png");}

Install

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

Usage

keep this plugin before scss-loader

Vue

build/utils.js

1exports.cssLoaders = function(options) {
2	options = options || {}
3	const cssLoader = { ... }
4
5	const cssLoaderRelative = {
6		loader: 'css-loader-relative'
7	}
8
9	function generateLoaders(loader, loaderOptions) {
10		const loaders = options.usePostCSS
11			? [cssLoader, postcssLoader]
12            : [cssLoader];
13        
14        if(loader) {
15            loaders.push({
16				loader: loader + '-loader',
17				options: Object.assign({}, loaderOptions, {
18					sourceMap: options.sourceMap
19				})
20            });
21            // add plugin at here
22			loaders.push(cssLoaderRelative);
23        }
24		...
25	}
26}

License

MIT

Copyright (c) 2018-present, xxxxst