Using css-loader to implement css module in vue-cli

【Foreword】

Both Vue and React's CSS modular solutions rely on loaders to implement them. In use, Vue uses scoped attributes to privatize styles, and uses deep selectors /deep to deprivatize styles.

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 used in react (based on 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>

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

What if you insist on using css-loader in vue to implement this solution of css module? Here we take vue-clie 3.x as an example.

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

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

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

  },
};

Actually, you don't need to write this paragraph. By default, the scaffolding of vue-cli has configured the modularization of css-loader , but the less file needs to be named in the form of xxx.module.less , which is different from the umi set and inconvenient. After configuring and restarting, you can write css like react, and store the imported style in data . Here I just want to 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 .

This is the end of this article about using css-loader to implement css module in vue-cli. For more information about using css module in vue-cli, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!