在vue 中使用 less

番茄西紅柿發布于2019-04-23 13:21 / 1099人閱讀

摘要：如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。

1.安裝

npm install --save-dev less less-loader

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

先在index.html頁面head標簽內插入這段代碼

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

效果展示：

此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。

如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。

GPU云服務器云服務器 vue 中使用 webrtc vue中使用webrtc html使用less 在php中使用組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1760.html

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

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

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

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

CloudDeveloper 2019-08-29 18:33 評論0 收藏0
vue項目中安裝和使用vux組件

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

yvonne 2019-08-26 10:15 評論0 收藏0
Vue學習筆記

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

gecko23 2019-08-21 17:27 評論0 收藏0
Webpack 配置詳解（含 4）——關注細節

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

jsbintask 2019-08-26 11:52 評論0 收藏0
vue 使用lib-flexable，px2rem 進行移動端適配但是引入的第三方UI組件 vu

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

Kyxy 2019-08-02 11:53 評論0 收藏0