vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)

之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过

需要解决的2个问题

一开始按照vue文件的使用方式(https://www.cnblogs.com/wzcsqaws/p/11283228.html)试了一下,总结了下主要有2个问题,

  1. webpack解析不到你写的文件路径,控制台直接报错
  2. 如何把你的publicPath,放到css中

解决第1个问题 仅仅针对public目录图片如何在css使用,这一步可以不要,直接看解决第二个问题就能实现,当然也可以了解一下

webpack处理css大概是这样子

根据webpack图片上的注释,问题定位在css-loader上,是它把css解析CommonJS,读取url解析不到然后报错,那我们就看一下css-loader文档看看
有没有解决办法,

文档上有写,可以在配置里面添加一个url方法,简单判断在某个文件夹下,就可以不解析这个url了,不解析自然控制台就不报错了

解决第2个问题 url使用字符串拼接完整

为了兼容原生,原本打算使用css变量加calc实现,奈何无法实现,只能退一步使用sass,让文件在sass-loader的时候把图片完整url拼接完成
写了个简单的例子

这样就可以使用了,但是这么写很麻烦,每个文件都要加变量或者引入变量不利于管理,而且还要跟process.env.BASE_URL挂钩对吧
sass-loader有一个参数是默认加全局sass文件或者全局参数的,这正是我需要的

这里是在vuecli中使用简化的配置来导入全局变量的文件,这样就可以只写一遍,不过还不够,我还想要与process.env.BASE_URL挂钩

看了sass-loader配置,发现prependData可以以方法的方式使用,我们可以在这里判断是何种环境然后定义变量为不同的值,问题完美解决啦
问一问,有没有人能用原生解决问题的,求告知~

原文地址:https://www.cnblogs.com/wzcsqaws/p/12710827.html