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可以以方法的方式使用，我们可以在这里判断是何种环境然后定义变量为不同的值，问题完美解决啦

问一问，有没有人能用原生解决问题的，求告知~