(九)css分离与图片路径处理

html-css026

(九)css分离与图片路径处理,第1张

这样就可以完美的解决我们提取css的需求。但是官方不建议我们这样做。他们认为CSS就该打包到JS中减少请求数，看需求吧。

然后在 修改最初的module模块下面的rule里面的css规则变成

上面将css分离出来了。但是图片路径可能不太对

这个不是我们想要的。所以我们要用到publicPath来解决。

在处理前我们在webpack.config.js上声明一个对象叫做 website

这里特别注意的就是 IP和端口 是你本机的IP和你配置的端口

然后在output选项中引用这个对象的publicPath属性

background-image:url('')设置图片路径

background-position:

-100px

-122px

设置图片中某一部分图的位置

第一个值是上

第二个值是左

然后通过这个图片外层标签来显示图片显示的范围

宽度和高度

background是一个简写的声明，它包括background-color、background-image、background-position等多个声明，有些声明的属性必须成对出现才生效，例如你这里的background:#b2f511 0 50%之所以失效，是因为后面的0 50%属性只有当background-image存在时才有意义。