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')
                ]
            }
        }