如何在vue-cli中使用css-loader實(shí)現(xiàn)css module

更新時(shí)間：2021年01月07日 09:51:46 作者：李牧敲代碼

這篇文章主要介紹了如何在vue-cli中使用css-loader實(shí)現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

【前言】

無(wú)論是vue還是react的css模塊化解決方案都是依賴(lài)loader來(lái)實(shí)現(xiàn)的在使用上，vue中用scoped屬性實(shí)現(xiàn)樣式的私有化，利用深度作用選擇器/deep來(lái)實(shí)現(xiàn)樣式的去私有化。

例子：

<div>
  <div class="demo">
    <div class="child"></
    div>
  </div>
</div>
<script>
// some code
<script/>
<style lang="less" scoped>
 .demo {
  height: 100px;
  padding-top: 20px;
  background-color: grey;
  /deep/.child {
   color: red;
  }
 }
</style>

在react中使用上是這么搞的（基于css-loader）：

//test.less
.demo {
  height: 100px;
  padding-top: 20px;
  background-color: grey;
  :global(.child) {
    color: red
  }
}

import styles from './test.less'

// some code

<div className={styles.demo}>
  <div class="child"></div>
</div>

不得不說(shuō)，在使用上還是vue比較方便。

如果硬要在vue中使用css-loader實(shí)現(xiàn)css module的這套解決方案呢？這里以vue-clie 3.x為例。

無(wú)論在vue的腳手架vue-cli中還是在react的腳手架umi中，，現(xiàn)在都使用了webpack-chain來(lái)實(shí)現(xiàn)配置webpack.

這里在vue-cli腳手架創(chuàng)建的項(xiàng)目根目錄下，新建vue.config.js，并寫(xiě)入如下內(nèi)容：

module.exports = {
 chainWebpack: (config) => {
  config.devServer
   .proxy({
    '/api': {
     target: 'http://localhost:3000',
     pathRewrite: { '^/api': '', },
    },
   })
   .port(9000);

  config.module
  .rule('less')
  .oneOf('normal-modules')
  .test(/.less$/)
  .use('css-loader')
  .tap(options => {
   return Object.assign(options, {
    modules: {
     localIdentName: '[name]__[local]___[hash:base64:5]',
     auto: /\.less$/i,
    },
   })
  });

 },
};

本來(lái)其實(shí)也不用寫(xiě)這段內(nèi)容，默認(rèn)情況，vue-cli的腳手架已經(jīng)配置了css-loader的模塊化，但是需要把less文件命名成xxx.module.less的形式，這和umi那套不同，也不方便，這樣配置然后重啟，就能像react一樣寫(xiě)css了，另外把引入的style存入data中。這里只是說(shuō)下可以在vue-cli使用css-loader的那套解決方案，但最佳實(shí)踐還是用vue自帶的那套。

完

以上就是如何在vue-cli中使用css-loader實(shí)現(xiàn)css module的詳細(xì)內(nèi)容，更多關(guān)于vue-cli中使用css-loader實(shí)現(xiàn)css module的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

圖文介紹Vue父組件向子組件傳值
本文通過(guò)實(shí)例代碼給大家詳細(xì)分享了Vue父組件向子組件傳值的過(guò)程以及關(guān)鍵點(diǎn)講解，一起學(xué)習(xí)參考下吧。
2018-02-02
基于Vue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能
在項(xiàng)目開(kāi)發(fā)中遇到這樣需求，就是有幾個(gè)tab欄，每個(gè)tab欄對(duì)應(yīng)的ajax請(qǐng)求不一樣，內(nèi)容區(qū)域一樣，內(nèi)容為實(shí)時(shí)刷新數(shù)據(jù)，實(shí)現(xiàn)方法其實(shí)很簡(jiǎn)單的，下面小編給大家?guī)?lái)了基于Vue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能，需要的朋友參考下吧
2017-04-04
Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)
這篇文章主要為大家介紹了Vue3從0搭建Monorepo項(xiàng)目組件庫(kù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
使用vue-video-player實(shí)現(xiàn)直播的方式
在開(kāi)發(fā)期間使用過(guò)video.js、mui-player等插件，發(fā)現(xiàn)這些video插件對(duì)移動(dòng)端的兼容性都不友好，最后發(fā)現(xiàn)一個(gè)在移動(dòng)端兼容不錯(cuò)的插件vue-video-player，下面通過(guò)場(chǎng)景分析給大家介紹使用vue-video-player實(shí)現(xiàn)直播的方法，感興趣的朋友一起看看吧
2022-01-01
vue3.0中的watch偵聽(tīng)器實(shí)例詳解
雖然計(jì)算屬性在大多數(shù)情況下更合適,但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器,這就是為什么Vue通過(guò)watch選項(xiàng)提供了一個(gè)更通用的方法,來(lái)響應(yīng)數(shù)據(jù)的變化,這篇文章主要給大家介紹了關(guān)于vue3.0中watch偵聽(tīng)器的相關(guān)資料,需要的朋友可以參考下
2021-10-10
詳解vue中axios請(qǐng)求的封裝
這篇文章主要介紹了vue中axios請(qǐng)求的封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法
這篇文章主要介紹了vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
Vue的MVVM實(shí)現(xiàn)方法
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue3響應(yīng)式API之ref的使用
這篇文章主要介紹了vue3響應(yīng)式API之ref的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題
這篇文章主要給大家介紹了如何解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題,文中通過(guò)圖文結(jié)合的方式講解的非常詳細(xì),有需要的朋友可以參考下
2024-05-05