Using CSS loader to implement CSS module in Vue cli

Time:2021-11-24

[preface]

Both Vue and react CSS modular solutions are implemented by relying on loaders. In use, they are used in VuescopedProperty to privatize the style and use the depth action selector/deepTo realize the privatization of style.

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

It has to be said that it is Vue more convenient to use.

What if you insist on using CSS loader to implement this solution of CSS module in Vue? Take Vue clie 3. X as an example.

Whether in Vue’s scaffoldvue-cliOr in react’s scaffoldingumi, are now in usewebpack-chainTo configure webpack

Herevue-cliCreate a new item under the root directory of the created itemvue.config.js, and write the following:


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

  },
};

In fact, you don’t need to write this paragraph. By default, the scaffold of Vue cli has been configuredcss-loaderBut you need to name the less file asxxx.module.lessThe form of this andumiThat set is different and inconvenient. If you configure it and restart it, you can write CSS like react. In addition, the introducedstyleDepositdataYes. This is just to say that it can be used in Vue clicss-loaderThe solution,But the best practice is to use Vue’s own set

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 the previous articles of developpaer or continue to browse the relevant articles below. I hope you will support developpaer in the future!

Recommended Today

Apache sqoop

Source: dark horse big data 1.png From the standpoint of Apache, data flow can be divided into data import and export: Import: data import. RDBMS—–>Hadoop Export: data export. Hadoop—->RDBMS 1.2 sqoop installation The prerequisite for installing sqoop is that you already have a Java and Hadoop environment. Latest stable version: 1.4.6 Download the sqoop installation […]