css-loader 对url的处理

css-loader

如果url 以 “/” 开始是不会对url进行处理的，除非配置了root

url(/image.png) => url(/image.png)

但是在我们项目中，由于有些图片比较大，在开发时候会被加载在内存中去，导致了开发时内存占用太大，想直接引用静态资源地址。

// server.js 这个是开发时为一些静态资源直接提供服务地址
app.use('/dist/assets', express.static(path.join(__dirname, '../src/assets/static/')))

background-image:url(./assets/logo.png) /*这样写会会报错，因为css-loader会去require它*/
background-image:url(/assets/logo.png) /*这样写直接取了根目录，而不是相对于网页的目录，*/

所以要想办法在css-loader处理完毕之后 将url(/assets/logo.png)替换为url(assets/logo.png)
所以我用的办法是 style-loader

{loader: 'style-loader',options: {transform: path.join(__dirname, './transform.js') // 必须是绝对地址，而且不能直接用函数代替}
}

// transform.js
module.exports = function (css) {return css.replace('url(/', 'url(')
}

这样处理之后，只要我的url中以“/”开始就表示不需要css-loader处理。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！