背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多.CSS 预处理器语言有 scss(sass).less 等. 2.SASS和SCSS的区别 除了文件扩展名不同(分别是“.sass” 和 “.scss”)外,Sass是以严格缩进式语法规则来书写的,不带大括号和分号,而SCSS的语法和CSS书写语法类似. 项目引入 1.vue-loa

背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多.CSS 预处理器语言有 scss(sass).less 等. 2.SASS和SCSS的区别 除了文件扩展名不同(分别是“.sass” 和 “.scss”)外,Sass是以严格缩进式语法规则来书写的,不带大括号和分号,而SCSS的语法和CSS书写语法类似. 项目引入 1.vue-loa

首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁.适应性更强,可读性更佳,更易于代码的维护等诸多好处.CSS预处理语言有SCSS (SASS) 和LESS.POSTCSS 那么SCSS和SASS 有什么区别呢 · 文件扩展名不同,文件后缀分别是“.scss”和“.sass” · sass是以严格缩进语法规则来编写代码的,不包括大括号和

1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 3.在vue文件中使用 <style lang='scss'> </style> 在vue项目全局中引入scss 1.全局引用时需要安装sass-resources-load

项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 使用scss时候在所在的style样式标签上添加lang="scss&quo

npm install sass-loader node-sass --save-dev

在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev 2: 安装sass-resources-loader

1. Cannot set property 'captcha' of undefined 在node项目中使用svg-captcha生成验证码报错 captcha的代码,这里有一个session.captcha,检查app.js,发现session没设置 exports.captcha = async(req, res, next) => { // 创建验证码 const captcha = svgCaptcha.create() // 验证码文本 req.session.captcha =

1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与less正好为css提供这些,让css可以像编程一样灵活书写样式,而且scss与还提供了一些css兼容性的处理,所以运用scss就不需要像写css时队友的语法需要做hack处理.SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的

最后一段时间一直在做一些网站或是CMS的项目,想用bootstrap,但是,设计那哥们说了,用什么都行,就不能用bootstrap,我去了个..... 无语中,逼着自己写.说实话,就是用bootstrap也只能用些基本的,大部分的式样还得改,因为UI有很大的出入.下面是我的一些经验,css同js一样,不管项目多大,都要从镙丝钉开始做起,再给不同的镙丝钉套不同尺寸的帽子,要由小至大的写,不能由大至少的写,不然,做到最后,疯掉的只能是自己. 项目UI比较另类,因此,我计划以bootstrap组件名称

如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或者 /deep/; 好,这没有什么问题,笔者之前用less的时候,一直用/deep/的,一直都没有bug,但最近的项目用的是scss/sass, 那么问题就出来了, 在scss/sass下用/deep/居然会报错,那我用回>>>吧,但是没有效果...

使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app create-react-app构建的项目默认使用css语法,但是隐藏的webpack配置中配置支持了css/sass/scss 要想使用less/scss及全局样式/变量首先需要执行npm run eject命令暴露webpack等配置文件等信息 该操作不可逆,会在项目根目录中生成config(配置文件)和s

上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色.体验优秀的跨屏页面,大幅提升开发效率.最主要是妹子UI的性能好,轻量级. 获取妹子UI(Amaze UI)下载地址:http://amazeui.org/getting-started 点击上方绿色的按钮,我们来下载最新版的妹子UI,下面有配套的文档和编辑器,

所有安装都是cd到该项目目录中安装 -S代表将插件添加到项目中的package.json文件 1.iview 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品 cnpm install iview -S 在项目中引入iview 在入口文件main.js中配置 import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iView) 2.node-sass与sass-loader n

先npm安装stylus和stylus-loader  (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- dependencies 里面加上下面这两句话 "stylus-loader": "^3.0.1",          "stylus": "0.52.4" 然后在cmd--项目中运行  npm install 2.  在回到项目中,

服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端的功能) 服务端渲染的优点主要由三点 1. 利于SEO 2. 提高首屏渲染速度 3. 同构直出,使用同一份(JS)代码实现,便于开发和维护 一起看看如何在实际的项目中实现服务端渲染 和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 有纯粹的 React,也有 Redux 作为状

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSr

Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme.io/#/zh-CN.(我在一次跟朋友聊天中得知他们公司前端在使用Element-UI),我在工作中一直在使用Extjs6.0前端框架,作为一个老牌重框架,它自带UI组件,需要什么组件拿来用就好.比如说一个日期插件,找到它的xtype,编写好配置项就好了.因为它的官方文档中也给出了一个较为完整的基

vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用scoped之后,父组件的样式将不会渗透到子组件中.不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响,如果希望父组件样式影响子组件,可以使用 >>>操作符: 1 2 3 <style scoped> .a >>> .b {

在 Vuejs 项目中如何定义全局变量 全局函数 在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录 token, 用户的地址信息等,这时候就需要设置一波全局变量和全局函数. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用 export default 暴露出去,在 main.js 里面使用 Vue.prototype 挂载到 vue 实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global