css冲突解决方案

首先将冲突的css文件加上前缀，比如zui.css文件和其他css类库冲突了，那么就在zui.css源码上用.xxzui{}包裹起来，如图：

然后将其保存为.scss后缀的文件

1.全局安装gulp

默认已经安装了node环境，如果没有的话请自行安装

npm install gulp -g

2.创建package.json文件

在自定义目录下执行

npm init

则package.json就保存在该目录下

3.本地安装gulp

npm intall gulp --save-dev

4.在该目录下手动创建gulpfile.js文件

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('gulp启动成功')
})

var scss = require('gulp-sass');

gulp.task('scss',function(){
    return gulp.src('zui.scss')//编译的文件
    .pipe(scss())
    .pipe(gulp.dest('css'))
});//输出

5.执行gulp scss

执行完成之后，编译好的zui.css文件会在css目录下，整体目录结构如图：

6.使用新生成的css文件

将新生成的css文件替换掉之前的css文件，然后在页面的最外层div上加上xxzui的class,例如

<div class="xxzui">...</div>

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源