1. 问题由来 在做两款H5的APP项目，前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想，组件不丰富，最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4（项目结构 webpack+vue+vue-store+vue-router+vant+less）。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式，方便了我们开发者，同时又因高度封装，有时也会给我们带来一点点困扰。比如，在使用vant组件库中的环形进...
前言我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！分析众所周知，vue-cli3.0使用了webpack进行打包处理，那么我们是否可以拿到目前打包默认的一些webpack配置，并在这些配置中找到一些蛛丝马迹，从而更改配置来实现对打包路径的更改呢？...
前言 最近快速上线一个抽奖活动，又不想用canvas做，思考了很久，还是决定使用css3的动画来做，只要小球动得快，就没人发现我这些个小球的运动路径都是一样的了。先上动图wxml文件：<view class="ball-box"><image class="ball ball_1 {{start?weiyi_1:}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image><image class="ball ball_2 {{start?weiyi_2:}}" src="https://acceleratepic.miniso.com/miniso/ball1.p...
摘要： 本文要实现的内容，使用nodejs 对文件的增删改查，演示的例子-》分离出一个html 文件里面的script 和style 里面的内容，然后单独生成js文件和css 文件。中间处理异步的api-》async/await , Promise 项目托管：extract-js-css , 欢迎star 直接上代码： // extract-js-css// import fs from fsvar fs = require(fs)// import csscomb from csscomb// var csscomb = require(csscomb)// var comb = new csscomb(zen);// consol...
<head lang="en"><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/*.css" rel="external nofollow" ><script src="js/*.js></script> </head>DOM文档的加载顺序是由上而下的顺序加载； 1、DOM加载到link标签 css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中； 2、DO...
本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考，具体如下： 不知道大家在做网页的时候有没有碰到这种情况：当你使用CSS3的动画属性时，想要在动画结束后添加一系列操作，但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义： 代...
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改； 1.v-bind:class || v-bind:style 其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为指令预期值（这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了）同v-bind的大多数指令（部分特殊指令如V-for除外）一样，除了可以绑定字符串类型的变量外，还支持一个单一的js表达式，也就是说v-bind：class的指令预期值...
在项目中经常会需要将一些接口的配合文件或者某些样式文件，分离出来单独打包，便于后期改动，这里我以css文件为例，介绍实现两种方法： 项目目录：如上图所示，现在我需要将项目中的scBtn.css文件单独打包出来。在不做任何配置，直接打包出来的css文件是压缩合并成了一个了，如下图，当我想要改某一个css文件时就不行了。方法一： 1、在bulid文件夹下建一个copy.js（这个js名称可以自定义）代码如下： var fs = require(fs); var...
大家还记得我们在老版本中，对于线上环境配置中会把所有的 css 多打成一个文件： 核心是使用了插件 extract-text-webpack-plugin，方式如下： 第一步都是加载插件 const ExtractTextPlugin = require(extract-text-webpack-plugin)这个插件的描述如下：Extract text from a bundle, or bundles, into a separate file.然后配置如下：（省去了 rules 相关的配置） 一般配置 filename 来保证最终生成的 css 文件名 plugins: [new Ext...
本文实例讲述了jQuery实现获取及设置CSS样式操作。分享给大家供大家参考，具体如下： addClass():向被选元素添加一个或多个类removeClass():从被选元素删除一个或多个类toggleClass():对被选元素进行添加/删除类的切换操作css():设置或返回被选元素的一个或多个样式属性样式表实例： .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; }addClass() <!DOCTYPE html> <html> <head> <script src="http://libs...
create-react-app 是facebook的官方脚手架，对于个人开发者和中小型公司快速创建项目非常推荐。react的CSS解决方案有很多，这里我技术选型时用 css modules 和 sass ，然后配合antd使用通用组件库。但是create-react-app原生并不支持 css modules 和 sass ，所以需要额外配置。 配置增加css modules和sass使用eject暴露配置create-react-app 默认是没有暴露 webpack 配置的，所以需要eject一下。注意如果项目在git仓库环境下，先提...
恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢 “包子”的帮助 注意 本案例 只是把你通用 的 比如 $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 以上这种通用的变量抽出来，方便你在其他scss的样式里面调用比如 li { background: nth($colour,6) } 只存储变量，别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法 我直接上案例吧sass_jb51.rar 案例里面有运行说明 我建议你还...
前言 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。 由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作...
为解决在Vue组件中全局引入 scss 变量及 mixins ，装载了一个名为 "sass-resources-loader" 解析器。安装 $ > cnpm i -D sass-resources-loader配置 配置的话是在 vue 的 loader 解析器中配置，即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js，在该文件中定义了 cssLoaders() 方法，该方法定义了诸如 css、less的解析方式，具体如下。 // build/utils.js exports.cssLoaders = function (options) {options = option...
本文介绍了详解webpack之scss和postcss-loader的配置，分享给大家，具体如下： 开始 npm i sass-loader node-sass postcss-loader autoprefixer首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀。当前postcss还有其他操作比如px2rem之类的。可以把postcss想象成babel-core只是一个控制中心，主要的还是它分散出来的插件。 /**** package.json ****/ // 指定你的前缀的兼容版本。 // 目前指定的只添加-webkit...