在实际开发中,大部分人的精力都在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')
                ]
            }
        }

安超
2 声望0 粉丝

非理论派,主要工作时间做上层应用开发,很多偏理论的知识我也是一个学习加总结的过程