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

建站知识 2021-07-02 23:04www.168986.cn长沙网站建设

【前言】

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

例子

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

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

//test.less
.demo {
    height: 100px;
    padding-: 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-chain来实现配置webpack.

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

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,
        },
      })
    });

  },
};

本来其实也不用写这段内容，默认情况，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内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：探究background-position属性中的百分比值的使用下一篇：浅谈解决space-evenly兼容性问题的两种方法

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设