如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter  (官网gulp插件) 第三步:在gulpfile.js 文件 var gulp = require('gulp'); var spriter = require('gulp-css-spriter…

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现…

css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这样的话,就会导致请求数量太多,造成资源浪费,以及访问速度变慢. 碰到这样的情况,可以使用两种方式解决这种问题:CSS雪碧图以及字体图标.但是这两种方式也都有不同的适用场景,需要根据实际需求来做取舍. 1.CSS雪碧图简介 CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图,是一种CSS…

在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带宽和资源. 雪碧图插件一般还支持快速引用小图标,例如当我们需要在html中放入service.png这张图片时,我们只需要使用<i class="icon icon-service"></i>这样的简单引入方式,省去了繁琐的引入图片的样式编写,大大提升效率. 在Vu…

先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPlugin = require('webpack-spritesmith'); 找到 文件内 plugins: 我是生成less文件后,单位rem实现雪碧图的响应式适配,用的是阿里方案页面内需引用flexbile.min.js(参考阿里手淘适配) 目录结构: 添加如下内容: 文件位置: build\w…

一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webpack-spritesmith可以将所有的icon小图标整合成一张图片.每次都只会请求一次,同时还能自动生成定位样式,对于都是同尺寸的小图标,直接可以使用. 三.废话少说,直接来code 1.我是使用vue-cli3配置这个webapck的插件的.如果使用cli2的网上也很多,自行查找 2.查阅资料…

1.先安装插件 npm install --save-dev webpack-spritesmith 2.配置webpack 配置之前 先引入var SpritesmithPlugin = require('webpack-spritesmith'); 在webpack.config.js的插件里面写(plugins) new SpritesmithPlugin({ // 目标小图标,这里就是你要生成的图片的目录 src: { cwd: path.resolve(__dirname, './sr…

一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth": 2, //一个tab代表几个空格数,默认为80 "useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减 "singleQuote": true, //字符串是否使用单引号,默认为false,使用双引号 "s…

1.通过命令新建一个vue项目 环境要求: 安装有 Node.js. vue. vue-cli . 创建项目: vue init webpack tx_demo cd tx_demo 进入项目,下载依赖: // 最新版已经无需安装依赖初始化,可直接运行下面的命令 npm install 或者 cnpm install 运行项目: npm run dev 2.由于我用的是sass样式,所以安装sass依赖 npm install node-sass sass-loader 3.配置雪碧图功能 先安…

//vue.config.js const path = require("path"); const SpritesmithPlugin = require("webpack-spritesmith"); //引入雪碧图 module.exports = { // 请求基本路径(是否在根目录下) baseUrl: "process.env.NODE_ENV" === "production" ? "/"…