Verwenden des CSS-Loaders zum Implementieren des CSS-Moduls in Vue-CLI

【Vorwort】

Sowohl die modularen CSS-Lösungen von Vue als auch von React verlassen sich bei ihrer Implementierung auf Loader. Im Einsatz verwendet Vue scoped Attribute, um Stile zu privatisieren, und verwendet tiefe Selektoren /deep um Stile zu deprivatisieren.

Beispiel:

<div>
    <div Klasse="Demo">
        <div Klasse="Kind"></
        div>
    </div>
</div>
<Skript>
//etwas Code
<Skript/>
<style lang="less" scoped>
  .demo {
    Höhe: 100px;
    Polsterung oben: 20px;
    Hintergrundfarbe: grau;
    /tief/.Kind {
      Farbe: rot;
    }
  }
</Stil>

So wird es in React verwendet (basierend auf CSS-Loader):

//test.weniger
.demo {
    Höhe: 100px;
    Polsterung oben: 20px;
    Hintergrundfarbe: grau;
    :global(.child) {
        Farbe: rot
    }
}

Stile aus „./test.less“ importieren

//etwas Code

<div Klassenname={styles.demo}>
    <div Klasse="Kind"></div>
</div>

Ich muss sagen, dass Vue bequemer zu verwenden ist.

Was wäre, wenn Sie darauf bestehen, den CSS-Loader in Vue zu verwenden, um diese Lösung des CSS-Moduls zu implementieren? Hier nehmen wir vue-clie 3.x als Beispiel.

Ob im Gerüst vue-cli von Vue oder im Gerüst umi von React, webpack-chain wird jetzt zum Konfigurieren von webpack verwendet.

Erstellen Sie hier im Stammverzeichnis des vom vue-cli Gerüst erstellten Projekts eine neue vue.config.js und schreiben Sie den folgenden Inhalt:

modul.exporte = {
  chainWebpack: (Konfiguration) => {
    config.devServer
      .Proxy({
        '/api': {
          Ziel: 'http://localhost:3000',
          Pfad neu schreiben: { '^/api': '', },
        },
      })
      .port(9000);

    Konfigurationsmodul
    .rule('weniger')
    .oneOf('normale Module')
    .test(/.less$/)
    .verwenden('css-loader')
    .tap(Optionen => {
      returniere Objekt.assign(Optionen, {
        Module:
          localIdentName: '[name]__[local]___[hash:base64:5]',
          auto: /\.less$/i,
        },
      })
    });

  },
};

Eigentlich müssen Sie diesen Absatz nicht schreiben. Standardmäßig hat das Gerüst von vue-cli die Modularisierung von css-loader konfiguriert, aber die less-Datei muss in der Form xxx.module.less benannt werden, was sich vom umi Set unterscheidet und unpraktisch ist. Nach der Konfiguration und dem Neustart können Sie CSS wie React schreiben und den importierten style in data speichern. Hier möchte ich nur über die Lösung sprechen, die css-loader in Vue-CLI verwenden kann. Am besten ist es jedoch, den mit Vue gelieferten Loader zu verwenden .

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Loader zur Implementierung von CSS-Modulen in Vue-CLI. Weitere Informationen zur Verwendung von CSS-Modulen in Vue-CLI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!