How to implement css module using css-loader in vue-cli

【Preface】

Whether it is vue or react's css modular solution, it depends on loader to implement it. In terms of use, vue uses scoped attribute to achieve style privatization, and uses deep function selector/deep to achieve style deprivatization.

example:

<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>

This is how it is done in react (based on css-loader):

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

import styles from './'

// some code

<div className={}>
  <div class="child"></div>
</div>

I have to say that vue is more convenient to use.

What if you want to use css-loader to implement this solution to css module in vue? Here we take vue-clie as an example.

Whether in vue scaffolding vue-cli or react scaffolding Umi, webpack-chain is now used to configure webpack.

Here, in the project root directory created by vue-cli scaffolding, create a new one and write the following content:

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

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

 },
};

In fact, there is no need to write this content. By default, the scaffolding of vue-cli has been configured with the modularity of css-loader, but the less file needs to be named in the form. This is different from the Umi set, and it is not convenient. In this way, configuration and restarting, you can write css like react, and save the imported style into data. Here I just talk about the solution that can use css-loader in vue-cli, but the best practice is to use the one that comes with vue.

over

The above is the detailed content of how to use css-loader to implement css module in vue-cli. For more information about using css-loader to implement css module in vue-cli, please follow my other related articles!