MiniCSSExtractPlugin处理css文件中的url路径问题

html-css032

MiniCSSExtractPlugin处理css文件中的url路径问题,第1张

做项目的时候，突然发现一个容易犯错的问题

1、webpack中对css文件的处理使用的是： MiniCSSExtractPlugin、css-loader、post-loader。

2、在plugins中也相对应的设置一个MiniCssExtractPlugin，打包后将css文件单独抽离到了css文件夹下

3、打包后的目录

4、打包后的css里面的url

6、再次打包，url引入正确

很简单，但是如果不注意，还真的很容易掉坑里！！

我想你应该是不太熟悉css中的相对路径和绝对路径：

"." 代表当前所在目录，相对路径。如:<a href="./abc">文本</a>或<img src="./abc" />；

".." 代表上一层目录，相对路径。如:<a href="../abc">文本</a>或<img src="../abc"/>；

"../../" 代表的是上一层目录的上一层目录，相对路径。 如:<img src="../../abc" />；

"/" 代表根目录,绝对路径。 如：<a href="/abc">文本</a>或<img src="/abc"/>；

"D:/abc/" 代表根目录,绝对路径。

在使用相对路径时，我们用符号“.”来表示当前目录；用符号“..”来表示当前目录的父目录。

所以，这里应该是background:url(../../images/bgs/backg.png)0 -418px repeat-x