cssModules从计划使用到放弃

在实际开发中,大部分人的精力都在js上,而css的管理总觉得不是那么重要。随着工程中代码量的增加,一套有效的css管理规范也是必须和必要的。最近一直想出一个工程中的css的命名规范,因此研究了一下css-loader的modules的配置,配置和使用都非常简单明了,但是对于我现在的工程并不适合,具体问题如下:

  1. 在现在所有的工程中我们习惯了使用sass进行css的预编译,同时还引入了compass这个类库,这样所有的公共样式及类库都是通过sass-resources-loader进行管理并注入到所有业务scss文件中,因此如果使用了cssModules则这此公共样式或第三方类库的class命名都需要手工进行修改,否则都会被自动修改为一个全局唯一的名称。
  2. 在现在所有工程的开发中引入第三方包是一种普遍现象,现在我们的普遍做法是把第三方包的mini.css修改为scss文件,然后在入口中统一引入。第三包中的css中写法各异,其中最大的问题是如果有动画的@keyframes uploadAnimateInlineIn(antd中),cssModules也会自动修改其命名,如果我们使用:global{把第三方包的代码加载进来,如果css中包含-webkit-box-sizing:border-box;在编译时也会提示错误}。
    鉴于以上两种问题,放弃使用cssModules,如同行有好的解决方案欢迎留言。

现在我们工程中的做法,每个组件一个class(组件名称-功能-日期),然后使用sass的天然嵌套方式在此类下进行书写。

if (loader === 'sass-resources-loader') {
            options = {
                resources: [
                    path.join(ROOT_PATH, 'node_modules/compass-mixins/lib/_animate.scss'),
                    path.join(ROOT_PATH, 'node_modules/compass-mixins/lib/_lemonade.scss'),
                    path.join(APP_PATH, 'css/common/variables.scss'),
                    path.join(APP_PATH, 'css/common/mixins/common.scss')
                ]
            }
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值