实际开发中，大部分人关注js，css管理总觉得没那么重要。随着项目中代码量的增加，一套行之有效的CSS管理规范也是必要且必要的。最近在思考一个项目中css的命名规范，于是研究了一下css-loader模块的配置。配置和使用都非常简单明了，但是不太适合我现在的项目。具体问题如下：在我们的项目中，习惯使用sass进行css预编译，同时引入了compass类库，使得所有公共样式和类库都通过sass-resources-loader进行管理，注入到所有业务scss文件。因此，如果使用cssModules，需要手动修改public样式或者第三方类库的类命名，否则会自动修改为全局唯一名称。在所有项目的开发中引入第三方包是一个普遍的现象。现在我们常见的做法是将第三方包的mini.css修改为scss文件，然后在入口统一导入。第三个包里的css写法不同。最大的问题是，如果有动画@keyframesuploadAnimateInlineIn（在antd中），cssModules会自动修改它的名字。如果我们使用：global{加载第三方包的代码，如果css中包含-webkit-box-sizing:border-box;编译的时候也会提示错误}。鉴于以上两个问题，放弃使用cssModules，如果你有好的解决办法，欢迎留言。现在在我们的工程实践中，每个组件都有一个类（组件名-功能-日期），然后在这个类下使用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')]}}
