css modules的一些實踐

本人使用vue引入css modules做實踐。vue文件檢視：以及

簡單的配置css-loader

然後上新增module屬性，就自動生成乙個$style的計算屬性可以用了

<
template
>
<
p :class
="$style.red"
>
<
span 
:class
="$style.redbg"
>this should be red
span
>
p>
template
>
<
style 
module
>
.red 
.red-bg
style>

基本使用沒有問題，自己弄個小demo也可以。再實際使用中遇到了坑

element-ui這個元件庫目前是不支援css modules的。使用預設的css modules後，element中的css檔案都改成了css module形式，但是使用時html**卻沒有用。比如下面這個alert彈窗。

導致找不到樣式，完全錯亂了。

解決方案：

讓需要進行css modules的檔案才進行css modules

//
專門針對node_modules中的樣式處理
，  }],
exclude:[path.resolve(__dirname, '../node_modules')]
}

這種方式是比較簡單，但是也夠粗暴。所有滿足條件的資料夾下面的檔案都會進行css modules【不管有沒有為style新增module都會css modules，只是新增了module會得到乙個計算屬性$style】。但是情況往往不是那麼簡單的，複雜場景見下面的坑。

比如

//element-ui的tab切換焦點樣式為

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active //你要想在更改這個顏色在本地改寫為

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active

不好意思，本地的樣式全部會轉換為css modules，而element上的樣式class還是原來的樣子。打包之後兩個class已經不一樣了，無法覆蓋

還有本地某個樣式不想使用css modules。比如common.scss有公用的按鈕樣式，想直接拿來用，不想再在當前檔案建立乙個新的樣式。比如

// common.scss中公用按鈕樣式
/* 白底橙字圓角按鈕 */
.white-orange-btn
// common.scss在入口html已經引用，在test.vue中直接使用，和css modules混用
<
template
>
<
div>
<
button 
:class
="['white-orange-btn', $style.btn]"
>按鈕
button
>
div>
template
>
<
style 
module
>
.btn
style
>

common.scss也不屬於node_modules，也進行了css modules，這裡直接使用字串『white-orange-btn』是找不到的。而『$style.whiteorangebtn』在本地也沒有定義。

所以上面兩種情況，要解決的問題是：在vue的單檔案元件內部，要能指定某些樣式進行從css modules，某些樣式不進行css modules。

解決方案：

使用oneof規則並在resourcequery字串中檢查module字串

//
webpack.config.js -> module.rules}]
},//這裡匹配普通的 `` 或 ``或者其他外部css
]}

這樣只有為style設定了module的才會進行css modules，其他情況不會進行css modules。

【注】：如果style中使用lang="scss"，則需要對.scss也要進行類似的配置

css modules的一些實踐

expect 一些實踐

django websocket實踐和一些相關知識

敏捷實踐的一些過程項

css modules的一些實踐

expect 一些實踐

django websocket實踐和一些相關知識

敏捷實踐的一些過程項

相關推薦