情景
对于要打包的css文件中,使用url()引入静态图片
- 相对路径,表示静态资源需要打包。url('./images/xxx.png')
- 绝对路径,表示静态资源在服务器上。url('/xxx.png')
所以要根据所写的路径区分是否要处理url()方法
通过百度,发现许多文章都写了css-loader有一个root配置,而且默认不解析以 / 开头的url()
但是我配置root报错:
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'root'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
at validate ...
...
查阅Webpack官方文档和css-loader npm文档,发现根本没有root的这个配置。。。上面的报错信息中第三行列表中也没有root的这个option
解决
options.url支持传入function
{
loader: 'css-loader',
options: {
url: url => !url.startsWith('/')
}
}
url开头不为 '/' 返回true,意为处理url的内容