在vue-cli中使用css-loader实现css module

【前言】

无论是vue还是react的css模块化解决 方案 都是依赖loader来实现的在使用上，vue中用 sco PE d 属性实现样式的私有化， 利用 深度作用选择器 /deep 来实现样式的去私有化。

例子：

<div>
    <div class="demo">
        <div class="child"></
        div>
    </div>
</div>
<script>
// some code
<script/>
<style lang="less" scoped>
  .demo {
    h ei ght: 100px;
    padding -t op: 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实现css module的这套解决方案呢？这里以vue-clie 3.x 为例 。

无论在vue的脚手架 vue-cli 中还是在react的脚手架 umi 中，，现在都使用了 webpack-ch ai n 来实现配置webpack.

这里在 vue-cli 脚手架创建的项目根目录下，新建 vue. config .js ，并写入如下内容：

module. export s = {
  chainWebpack: (config) => {
    config.devServer
      . Proxy ({
        '/api': {
          t arg et: 'http://localhost:3000',
          pat hr ewr IT e: { '^/api': '', },
        },
      })
      .port(9000);

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

  },
};

本来其实也 不用 写这段内容，默认情况，vue-cli的脚手架已经配置了 css-loader 的模块化，但是需要把less文件命名成 xxx.module.less 的形式，这和 umi 那套不同，也不方便，这样配置然后重启，就能像react一样写css了，另外把引入的 style 存入 data 中。这里只是说下可以在vue-cli使用 css-loader 的那套解决方案， 但最佳实践还是用vue 自带 的那套 。

到此这篇关于在vue-cli中使用css-loader实现css module的 文章 就介绍到这了,更多相关vue-cli使用css module内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 在vue-cli中使用css-loader实现css module 全部内容，希望文章能够帮你解决 在vue-cli中使用css-loader实现css module 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于在vue-cli中使用css-loader实现css module的详细内容...