gulp如何给css添加scoped

2024-11-03

gulp教程之gulp-minify-css

简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1.1.gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2.本示例目录结构如下: 2.本地安装gulp-minify-css 2.1.github:https://gi

gulp给文件后添加md5时间戳

这里为总的方法,实际项目中拷贝出来的,底下有详细的总结以及只针对添加时间戳的方法 1 // 引入 gulp及组件 var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), //压缩css jshint = require('gulp-jshint'), //js代码校验 uglify = require('gulp-uglify'

用css 添加手状样式,鼠标移上去变小手,变小手

用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style.cursor='hand'" cursor其他取值 auto //标准光标 default //标准箭头 pointer, hand //手形光标 wait //等待光标 text //I形光标 vertical-text //水平I形光标 no-drop //不可拖动光标 not-allowed

vue css 模块化编程 CSS Modules Scoped

1.scoped https://vue-loader.vuejs.org/zh/guide/scoped-css.html 2.module https://vue-loader.vuejs.org/zh/guide/css-modules.html#用法 3.原理 module:通过给样式名加hash字符串后缀的方式. scoped:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一. 4.区别 (1)css优先级 scoped处理会造成每个样式的权重加重,因为除了使用类名

gulp之压缩css，less转css，浏览器实时刷新【原创】

gulp入门 gulp浏览器实时同步首先要下载对应的插件包: gulp-less包:cnpm install gulp-less --save-dev gulp-connect包:cnpm install gulp-connect--save-dev gulp-minify-css包:cnpm install gulp-minify-css --save-dev var gulp=require('gulp'), gulp_less=require('gulp-less'), gulp_con

用css 添加手状样式,鼠标移上去变小手

用css 添加手状样式,鼠标移上去变小手,变小手用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style.cursor='hand'" cursor其他取值 auto :标准光标 default :标准箭头 pointer, hand :手形光标 wait :等待光标 text :I形光标 vertical-text :水平I形光标 no-drop :不

gulp 对js\css进行md5 加密

有的服务器为了网站加载速度,会做服务器缓存,这样就会出现代码出现引用地址没变,新代码不生效,而我们又希望新代码可以及时生效,这样我们就需要避免缓存,当然也有很多方法,本文只介绍使用gulp-rev(对文件名加MD5后缀)和gulp-rev-collector(路径替换)配合进行对文件名字进行md5加密. rev会做什么: 根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系. 替换html里静态资源的路径为带有md5值的文件路径,这样

gulp 压缩js,css

最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太慢了,实在受不了了. 下面我们引入gulp 对js做压缩,gulp是基于Node.js的前端构建工具.所以首先需要安装nodejs ,因为我的项目本身就是node项目,所以直接装gulp就好.全局安装gulp,命令如下 npm install -g gulp 需要安装的依赖项下面这些,依次安装就好了

vue css中scoped

1.什么是scoped vue组件中,在style标签中有一个属性,叫做scoped.当此标签拥有scoped属性的时候,该组件下的css样式只适用于本组件,而不会影响全局组件.这其实也相当于样式的模块化了. 2.scoped实现的原理其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具.来看一下转译之前的代码: 编译前的代码: <template> <span class="textScoped">scoped测试</s

jQuery CSS 添加/删除类名

addClass(class) — 为每个匹配的元素添加指定的类名.参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)示例一 :为匹配的元素加上 'selected' 类HTML 代码:<p>Hello</p>jQuery 代码:$("p").addClass("selected");结果:[ <p class="selected">Hello</p> ]

Gulp:静态资源(css,js)版本控制

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录结构 html模板文件 <html> <head>  <link rel="stylesheet" href="../styles/one.css"&g

gulp快速将css中的px替换成rem

1.Gulp安装配置 1.全局安装gulp 1.1 安装命令提示符执行cnpm install gulp -g; 1.2 查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装. 2.新建package.json文件 2.1说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件: 2.2配置package.json 命令提示符执行cnpm init 3.本地安装gulp插件 3.1以gulp-replace为例(编

gulp之压缩css

/** * css压缩 * npm install --save-dev gulp-minify-css * npm install --save-dev gulp-rename * * * 可参考: * https://www.npmjs.com/package/gulp-minify-css * https://github.com/hparra/gulp-rename */ var minifyCss = require('gulp-minify-css'); var rename = r

gulp打包js/css时合并成一个文件时的顺序解决

1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js'))//合成到一个js .pipe(gulp.dest(buildBasePath+'js'))//输出到js目录 .pipe(uglify())//压缩js到一行 .pipe(concat('build.min.js'))//压缩后的js .pipe(gulp.dest(buildBasePat

css添加样式的四种方式

1. 导入样式:在 .css文件中使用@import url("...")来引入另一个css样式表 2. 外部样式:在html页面中的head中使用 link 标签引入,如<link rel="stylesheet" type="text/css" href="a.css" /> 3. 内部样式(嵌入式):在HTML页面中的 style 标签中使用样式 , <style type="text/css

SublimeText插件autoprefixer : css 添加前续

/* 使用前 */ body { background: linear-gradient(to bottom, #DADADA, #000); } p a { -webkit-border-radius: 5px; border-radius: 5px } /* ------------------------ * 使用后 */ body { background: -webkit-linear-gradient(top, #DADADA, #000); background: linear-g

css 添加阴影

添加阴影,分为内阴影和外阴影. inset:内阴影. 不写默认外阴影. box-shadow: 水平位移垂直位移模糊半径 #box-shadow{ -moz-box-shadow:5px 5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:5px 5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:5px 5px 5px #999 inset; /*

vue组件样式添加scoped属性之后，无法被父组件修改。或者无法在本组件修改element UI样式

在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是想要修改还是有方法的: 1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式. 2.使用深度作用选择器,可以通过vue-loader提供的新写法 vue-loader 写法如下(先安装,在使用): <style scoped> .a >>>

css 添加滚动条

代码: <template> <div class="w" style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"> <div class="pc_box"> <a class="pc_box_list"> 水电费 </a> <a class="pc_box_list&

css添加了原始滚动条要隐藏滚动条的显示

// 添加伪类 <style> ::-webkit-scrollbar {display:none} </style> <div style=" width:200px; height: 200px; overflow-y: scroll;"> </div>