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