在vue 中使用 less

番茄西紅柿發(fā)布于2019-04-23 13:21 / 1110人閱讀

摘要：如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。

1.安裝

npm install --save-dev less less-loader

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

先在index.html頁(yè)面head標(biāo)簽內(nèi)插入這段代碼

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

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

在添加 build/webpack.base.conf.js 里面的

module.exports 里的 module 里添加下面這段配置

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

組件 headers

<template>
    <div class="box"> <p>headerp> div>
template>

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

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

效果展示：

此隨筆乃本人學(xué)習(xí)工作記錄，如有疑問(wèn)歡迎在下面評(píng)論，轉(zhuǎn)載請(qǐng)標(biāo)明出處。

如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1760.html

相關(guān)文章

Javascript如何與Sass,Less,Css之間共享變量？

摘要：環(huán)境和及其等先安裝，下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量，然后使用。文件有一個(gè)關(guān)鍵字，它在功能上等同于的關(guān)鍵字，即導(dǎo)出一個(gè)對(duì)象。原博文地址，此博文首次發(fā)于csdn，原創(chuàng) 前段時(shí)間遇到網(wǎng)站換膚的需求，本想挺簡(jiǎn)單的，直接用 Sass 或者 Less 設(shè)置變量就好了，結(jié)果導(dǎo)致的問(wèn)題就是 js 中設(shè)置的樣式得單獨(dú)設(shè)置，好麻煩。本文章代碼gitHub地址 ...

honhon 2019-08-23 16:49 評(píng)論0 收藏0
Javascript如何與Sass,Less,Css之間共享變量？

摘要：環(huán)境和及其等先安裝，下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量，然后使用。文件有一個(gè)關(guān)鍵字，它在功能上等同于的關(guān)鍵字，即導(dǎo)出一個(gè)對(duì)象。原博文地址，此博文首次發(fā)于csdn，原創(chuàng) 前段時(shí)間遇到網(wǎng)站換膚的需求，本想挺簡(jiǎn)單的，直接用 Sass 或者 Less 設(shè)置變量就好了，結(jié)果導(dǎo)致的問(wèn)題就是 js 中設(shè)置的樣式得單獨(dú)設(shè)置，好麻煩。本文章代碼gitHub地址 ...

CloudDeveloper 2019-08-29 18:33 評(píng)論0 收藏0
vue項(xiàng)目中安裝和使用vux組件

摘要：是一款基于構(gòu)建的移動(dòng)組件庫(kù)使用安裝安裝必須配合使用安裝用以正確編譯源碼，否則會(huì)出現(xiàn)安裝以正確進(jìn)行語(yǔ)言文件讀取在文件進(jìn)行配置將代碼賦值給變量在里加入完整的內(nèi)容中添加 vux是一款基于Vue構(gòu)建的移動(dòng)UI組件庫(kù)（https://doc.vux.li/zh-CN/） 1.使用npm安裝vuxnpm install vux --saveshowImg(https://segmentfault....

yvonne 2019-08-26 10:15 評(píng)論0 收藏0
Vue學(xué)習(xí)筆記

摘要：如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是確認(rèn)的。中斷當(dāng)前的導(dǎo)航。如果瀏覽器的改變了可能是用戶手動(dòng)或者瀏覽器后退按鈕，那么地址會(huì)重置到或者跳轉(zhuǎn)到一個(gè)不同的地址。 githubhttps://github.com/cd-dongzi/vue-example 1. 解決css背景圖片打包路徑錯(cuò)誤的問(wèn)題在utils.js 文件中找到 generateLoaders 方法把以下代碼進(jìn)行更...

gecko23 2019-08-21 17:27 評(píng)論0 收藏0
Webpack 配置詳解（含 4）——關(guān)注細(xì)節(jié)

摘要：由于這種差異我們將對(duì)預(yù)處理器文件的配置封裝為函數(shù)，由參數(shù)生成對(duì)應(yīng)配置，將文件放入文件內(nèi)，將配置放在文件內(nèi)。前言源代碼熟悉 webpack 與 webpack4 配置。 webpack4 相對(duì)于 3 的最主要的區(qū)別是所謂的零配置，但是為了滿足我們的項(xiàng)目需求還是要自己進(jìn)行配置，不過(guò)我們可以使用一些 webpack 的預(yù)設(shè)值。同時(shí) webpack 也拆成了兩部分，webpack 和 w...

jsbintask 2019-08-26 11:52 評(píng)論0 收藏0
vue 使用lib-flexable，px2rem 進(jìn)行移動(dòng)端適配但是引入的第三方UI組件 vu

摘要：最近在寫(xiě)移動(dòng)端項(xiàng)目就想用，來(lái)進(jìn)行適配把轉(zhuǎn)換成但是也用到了第三方組件庫(kù)把這個(gè)引入發(fā)現(xiàn)一個(gè)問(wèn)題就是的組件都縮小了在網(wǎng)上找不到答案最后在一個(gè)開(kāi)發(fā)群里找到了解決的方法目前的處理方法是將組件中轉(zhuǎn)化為，避免被轉(zhuǎn)成在中中配置以下代碼自定義的全局最近在寫(xiě)移動(dòng)端項(xiàng)目,就想用lib-flexable，px2rem來(lái)進(jìn)行適配,把px轉(zhuǎn)換成rem但是也用到了第三方UI組件庫(kù)vux,把這個(gè)引入發(fā)現(xiàn)一個(gè)問(wèn)題就是...

Kyxy 2019-08-02 11:53 評(píng)論0 收藏0