在vue 中使用 less

番茄西红柿发布于2019-04-23 13:21 / 1032人阅读

摘要：如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

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>

效果展示：

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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