成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

cssModules從計(jì)劃使用到放棄

stormgens / 2317人閱讀

摘要：隨著工程中代碼量的增加，一套有效的管理規(guī)范也是必須和必要的。鑒于以上兩種問題，放棄使用，如同行有好的解決方案歡迎留言?，F(xiàn)在我們工程中的做法，每個(gè)組件一個(gè)組件名稱功能日期，然后使用的天然嵌套方式在此類下進(jìn)行書寫。

在實(shí)際開發(fā)中，大部分人的精力都在js上，而css的管理總覺得不是那么重要。隨著工程中代碼量的增加，一套有效的css管理規(guī)范也是必須和必要的。最近一直想出一個(gè)工程中的css的命名規(guī)范，因此研究了一下css-loader的modules的配置，配置和使用都非常簡單明了，但是對于我現(xiàn)在的工程并不適合，具體問題如下:

在現(xiàn)在所有的工程中我們習(xí)慣了使用sass進(jìn)行css的預(yù)編譯，同時(shí)還引入了compass這個(gè)類庫，這樣所有的公共樣式及類庫都是通過sass-resources-loader進(jìn)行管理并注入到所有業(yè)務(wù)scss文件中，因此如果使用了cssModules則這此公共樣式或第三方類庫的class命名都需要手工進(jìn)行修改，否則都會(huì)被自動(dòng)修改為一個(gè)全局唯一的名稱。

在現(xiàn)在所有工程的開發(fā)中引入第三方包是一種普遍現(xiàn)象，現(xiàn)在我們的普遍做法是把第三方包的mini.css修改為scss文件，然后在入口中統(tǒng)一引入。第三包中的css中寫法各異，其中最大的問題是如果有動(dòng)畫的@keyframes uploadAnimateInlineIn(antd中)，cssModules也會(huì)自動(dòng)修改其命名，如果我們使用:global{把第三方包的代碼加載進(jìn)來，如果css中包含-webkit-box-sizing:border-box；在編譯時(shí)也會(huì)提示錯(cuò)誤}。
鑒于以上兩種問題，放棄使用cssModules，如同行有好的解決方案歡迎留言。

現(xiàn)在我們工程中的做法，每個(gè)組件一個(gè)class（組件名稱-功能-日期），然后使用sass的天然嵌套方式在此類下進(jìn)行書寫。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116814.html

相關(guān)文章

  • CSSModules

    摘要：支持不同的構(gòu)建工具，這里我使用的是下文都是以為例。全局作用域允許用的語法聲明一個(gè)全局的作用域。使用普通的寫法，就會(huì)引用全局的的樣式我是結(jié)果的顯示黑色。的組合在里，一個(gè)選擇器可以繼承另一個(gè)選擇器。 showImg(https://segmentfault.com/img/bV7OHk?w=1050&h=360); 這篇文章來一起了解 css 模塊化的用法和原理 ，dome 地址：css ...

    Youngdze 評論0 收藏0

  • react搭建后臺管理（react初窺）

    摘要：前言以前一直是用進(jìn)行的開發(fā)于是決定年后弄一弄所以年后這段時(shí)間也就一直瞎弄可算是看到成果了本來是想寫一個(gè)類似仿今日頭條那樣的項(xiàng)目來入手后來又尋思還不如寫個(gè)后臺管理呢。于是乎自己便著手簡單的搭建了一個(gè)集中設(shè)置的版本。 前言 以前一直是用vue進(jìn)行的開發(fā), 于是決定年后弄一弄react, 所以年后這段時(shí)間也就一直瞎弄react, 可算是看到成果了 本來是想寫一個(gè) 類似 Vue仿今日頭條 那樣...

    wangjuntytl 評論0 收藏0

  • 關(guān)于一次線上出錯(cuò)的思考--如何規(guī)避線上程序崩盤

    摘要：近日在工作中由于疏忽問題導(dǎo)致某個(gè)客戶的系統(tǒng)直接崩盤，極大的影響了用戶使用產(chǎn)品的體驗(yàn)。在經(jīng)過修改之后，不得不思考下在日常開發(fā)中的一些壞習(xí)慣以及如何規(guī)避這些日常問題了。同時(shí)由于我們未能對錯(cuò)誤進(jìn)行好的處理，導(dǎo)致程序直接卡死。 近日在工作中由于疏忽問題導(dǎo)致某個(gè)客戶的系統(tǒng)直接崩盤，極大的影響了用戶使用產(chǎn)品的體驗(yàn)。在經(jīng)過修改之后，不得不思考下在日常開發(fā)中的一些壞習(xí)慣以及如何規(guī)避這些日常問題了。 在...

    LiuRhoRamen 評論0 收藏0

  • 讓CSS更完美: PostCSS-modules

    摘要：起初只是一個(gè)美化文檔的工具，但是事情到年發(fā)生了變化。對于來說，這意味著有問題的布局。和朝夕相伴的有和最終確定的。他們通過增加前綴的辦法，解決了命名沖突的問題。長長的前綴將成為歷史，歡迎來到未來的世界。 譯者注（GeoffZhu）: 這篇適合一些使用過預(yù)處理CSS的開發(fā)者，比如less，sass或stylus，如果你都沒用過，那你一定不是個(gè)好司機(jī)。在PostCSS中早就可以使用CSS M...

    Barry_Ng 評論0 收藏0

  • 相愛相殺終于結(jié)束 蘋果宣布放棄愛爾蘭數(shù)據(jù)中心建設(shè)

    摘要：本周四蘋果公司表示已經(jīng)放棄價(jià)值億美元的愛爾蘭數(shù)據(jù)中心建設(shè)。愛爾蘭高等法院與近日發(fā)布裁決，駁回上訴者相關(guān)請求，允許建設(shè)蘋果數(shù)據(jù)中心項(xiàng)目。此次蘋果放棄愛爾蘭數(shù)據(jù)中心項(xiàng)目將會(huì)對阿森賴地區(qū)造成巨大損失。本周四蘋果公司表示已經(jīng)放棄價(jià)值10億美元的愛爾蘭數(shù)據(jù)中心建設(shè)。早在2015年，蘋果公司宣布在愛爾蘭建設(shè)數(shù)據(jù)中心計(jì)劃，距今已經(jīng)過去了2年之久，同期宣布建設(shè)的還有蘋果丹麥數(shù)據(jù)中心。目前，蘋果丹麥數(shù)據(jù)中心已...

    2shou 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<