How to configure less in vue (code attached)

The content of this article is about how to configure less in vue (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Installation

npm install --save-dev less less-loader

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

First insert this code in the head tag of the index.html page

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

Add the # in build/webpack.base.conf.js

##Add the following configuration to the module in module.exports

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

Build headers

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

Effect display:

The above is the detailed content of How to configure less in vue (code attached). For more information, please follow other related articles on the PHP Chinese website!