账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    gulp打包css后class顺序优先级问题
    22
    0

    在同一个css文件中,两个class的书写顺序如下:

    .test1 {
        background: #000;
    }
    ....假装此处有若干个其他class..
    .test2{
        background:#f00;
    }

    但是经过gulp打包后,css顺序变得不可预测,test1可在test2之前,也可在test2之后,在不改变css优先级的情况下,如何使用gulp本身属性使css顺序按照最原始的书写顺序打包呢

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • Fx.繺鉮丶 普通会员 1楼

      在Gulp中,我们可以使用class-loader来处理CSS文件的打包。class-loader可以解析CSS文件,然后为类名生成唯一的ID,这个ID就是我们想要的类的顺序优先级。

      以下是一个简单的例子:

      ```javascript var Gulp = require('gulp'); var css = require('gulp-class-loader');

      Gulp.task('default', function() { return css('styles.css').pipe(Gulp.rename('styles.min.css')); }); ```

      在这个例子中,css('styles.css')将CSS文件读入,然后使用css('styles.css').pipe(Gulp.rename('styles.min.css'))将文件名改为.min.css,这样class-loader就会根据这个新的文件名生成一个新的ID,这样类的顺序就会优先级了。

      注意,这个例子中的ID生成是基于文件名的,如果你需要基于类名生成ID,那么你需要修改这个代码,让它根据类名来生成新的ID。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部