So konfigurieren Sie weniger in Vue (Code beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Konfiguration von weniger in Vue (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

1. Installieren Sie

npm install --save-dev less less-loader

npm install --save-dev style-loader css-loader

Fügen Sie zuerst diesen Code in das Head-Tag der index.html-Seite ein

<script>
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= 640) {
            docEl.style.fontSize = &#39;100px&#39;;
          } else {
            docEl.style.fontSize = 100 * (clientWidth / 640) + &#39;px&#39;;
          }
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false);
    })(document, window);
  </script>

Fügen Sie

Folgende Konfiguration zum Modul in module.exports hinzufügen

{
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }

Header erstellen

<template>
    <div> <p>header</p> </div>
</template>

<script>
export default {
  name: "headers",
  data() {
    return {};
  }
};
</script>

<style scoped>
.box {
  height: 300/50rem;
  width: 200/50rem;
  background-color: red;
  font-size: 16/50 rem;
}
</style>

Effektanzeige:

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie weniger in Vue (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!