最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用;

1、在assets下创建一个less文件;

2、安装style-resources-loader (npm i style-resources-loader --save-dev);

3、然后在vue.config.js里面配置一下

module.exports = {

   pluginOptions: {

     "style-resources-loader": { preProcessor: "less", patterns: [path.resolve(__dirname, "./src/assets/style.less")] }

   }

};

我以为这样就可以了,然后直接在组件中使用全局less的变量,然后报了undefined的错,上网查了一下还需要最后一步

4、安装vue-cli-plugin-style-resources-loader,然后就可以了。

(如果你用的是vuecli3,那么直接安装vue add style-resources-loader);这样会自动安装好plugin-style-resources-loader,就可以省去第四步了!!!!!!

vue cli3如何引入全局less变量的更多相关文章

  1. vue vue-cli中引入全局less变量的方式

    我们经常用less定义一些全局变量,比如主题的颜色,为了避免在每个组件中引用我首先尝试放在main.js中,发现并不起作用... 先看vue-cli2.x 版本如何解决 1.安装; npm insta ...

  2. Vue 中如何定义全局的变量和常量

    Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1:创建 global.js 并且在其中定义   let a = 10 ...

  3. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  4. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  5. 全局安装 Vue cli3 和 继续使用 Vue-cli2.x

    官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @ ...

  6. vue/cli3引入cesium

    vue/cli3引入cesium 一开始用了webpack结合vue引入vue:结果是各种bug,搞了半天.最后问了基友,发现vue脚手架这个·简单高效的方法,只需要几行代码就轻松地搞定啦! 方案一. ...

  7. vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令

    目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...

  8. vue项目中全局配置变量

    在项目中api管理需要用到全局变量,创建全局变量的方式也有很多. 1.通过export default const BASEURL = "http://localhost:3333/&quo ...

  9. [Vuejs] 在vue各个组件中应用全局scss变量

    需要安装一个插件:sass-resources-loader 1.执行安装命令: npm i sass-resources-loader --save-dev 2.修改vue-cli环境下build文 ...

随机推荐

  1. 配置ssh互信

    配置基于密钥认证的免密登录 用到的命令: ssh-keygen:创建公钥和密钥,会生成id_rsa和id_rsa.pub两个文件 生成ssh密钥后,密钥将默认存储在家目录下的.ssh/目录中.私钥和公 ...

  2. Docker管理工具之portainer

    参考:https://www.cnblogs.com/frankdeng/p/9686735.html 1. 查询portainer镜像 命令:docker search portainer 实例: ...

  3. OAuth2.0-2jwt令牌

    JWT令牌 解决了之前普通令牌每次都要远程校验令牌带来得网络消耗:(有网友说可以将令牌验证从认证服务器上放到各个资源服务器上,不知是否可行?) JWT令牌的优点: 1.jwt基于json,非常方便解析 ...

  4. QWebEngineView简单使用

    QWebEngineView是提供一个访问web页面的widget,这里是一个简单的使用代码 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H #includ ...

  5. qt事件过滤器的使用(可以用于控制屏幕背光等)

    在嵌入式qt项目中,有时并不需求屏幕一直亮着,需要一段时间不操作时,将屏幕背光关掉,以达到节能的目的: 在qt项目中,可以通过重写事件过滤器来实现屏幕操作的检测,加上定时器的时间控制,可以实现指定时间 ...

  6. 007_对go语言中的自定义排序sort的小练习

    在go语言基础知识中,有个知识点是go语言的自定义排序,我在学习完之后,自己做了一些小练习和总结. 首先按照惯例,还是呈上代码演示: package main import "fmt&quo ...

  7. JS 移动端笔记

    移动端的网页特效     移动端触屏事件概述 触屏touch事件     touchstart 手指触摸到一个DOM元素时触发     touchmove 手指在一个DOM上滑动时触发     tou ...

  8. PyTorch 学习

    PyTorch torch.autograd模块 深度学习的算法本质上是通过反向传播求导数, PyTorch的autograd模块实现了此功能, 在Tensor上的所有操作, autograd都会为它 ...

  9. 15、Java中级进阶 面向对象 继承

    1.何为面向对象 其本质是以建立模型体现出来的抽象思维过程和面向对象的方法(百度百科)是一种编程思维,也是一种思考问题的方式 如何建立面向对象的思维呢?1.先整体,再局部2.先抽象,再具体3.能做什么 ...

  10. Could not update Activiti database schema: unknown version from database: '5.22.x.x'

    原因:activiti 相关的jar版本和表 act_ge_property 中 schema.version 所存储的版本不一致导致报错的. 查看activiti 相关jar版本 然后修改表中的版本 ...