在实际开发中，大部分人的精力都在js上，而css的管理总觉得不是那么重要。随着工程中代码量的增加，一套有效的css管理规范也是必须和必要的。最近一直想出一个工程中的css的命名规范，因此研究了一下css-loader的modules的配置，配置和使用都非常简单明了，但是对于我现在的工程并不适合，具体问题如下:
- 在现在所有的工程中我们习惯了使用sass进行css的预编译，同时还引入了compass这个类库，这样所有的公共样式及类库都是通过sass-resources-loader进行管理并注入到所有业务scss文件中，因此如果使用了cssModules则这此公共样式或第三方类库的class命名都需要手工进行修改，否则都会被自动修改为一个全局唯一的名称。
- 在现在所有工程的开发中引入第三方包是一种普遍现象，现在我们的普遍做法是把第三方包的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') ] } }