【 introduction 】

Both Vue and React CSS modular solutions are implemented by loader. Vue privatized styles using scoped property and deprivatized styles using depth selector /deep.

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>
Copy the code

React does this with csS-loader:

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

import styles from './test.less'

// some code

<div className={styles.demo}>
    <div class="child"></div>
</div>

Copy the code

I have to say, vUE is more convenient in use.

How about using CSS-Loader to implement CSS Module in VUE? Vue-clie 3.x is used as an example.

Whether in vUE scaffolding vue-CLI or react scaffolding umi, webpack-chain is now used to configure webpack.

Create vue.config.js in the project root directory of vue-cli scaffolding 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,}})}); }};Copy the code

By default, the uE-CLI scaffolding has been configured with the modularization of CSS-loader, but it needs to name the less file in xxx.module.less form, which is different from umi, and also not convenient, so configure and restart. You can write CSS like react and store the imported style in data. The CSS loader solution can be used in vue-CLI, but the best practice is to use the one that comes with VUE.

After the