快捷導(dǎo)航

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

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

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

【前言】

無論是vue還是react的css模塊化解決方案都是依賴loader來實現(xiàn)的在使用上，vue中用scoped屬性實現(xiàn)樣式的私有化，利用深度作用選擇器/deep來實現(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>

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

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

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

這里在vue-cli腳手架創(chuàng)建的項目根目錄下，新建vue.config.js，并寫入如下內(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,
    },
   })
  });

 },
};

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

完

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

您可能感興趣的文章: