之前在用vue-cli3框架的时候对于常用的less 、sass 变量都是需要时就在单文件中引入文件,这样做比较麻烦。那么基于 vue-cli3 如何配置全局的less 、sass 变量?

《1》安装
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 《2》vue.config.js配置 1.配置全局less变量
//第三方插件
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
//这个是加上自己的路径,注意:试过不能使用别名路径
path.resolve(__dirname, "./src/assets/variable.less")
]
}
} 2.配置全局sass变量
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
data: `@import "~@/variables.scss";`
}
}
}

  经过这么点小优化,就无需在需要使用变量时在单文件中引入一次文件

vue-cli3 配置全局less 、sass 变量的更多相关文章

  1. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  2. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  3. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

  4. vue/cli3 配置相对路径

    根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...

  5. vue中怎么全局引入sass文件

    1.添加依赖 npm install sass-resources-loader --save-dev 2.修改build/utils.js scss: generateLoaders('sass') ...

  6. vue cli3 配置postcss

    1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...

  7. vue cli3如何引入全局less变量

    最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用: 1.在assets下创建一个less文件: 2.安装style-resources-loader (npm i styl ...

  8. 通过 sass-resources-loader 全局注册 Sass/Less 变量

    使用webpack引入sass/less全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的 ...

  9. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

随机推荐

  1. 【长期更新】Python使用随想笔记

    Q1:python函数传参是传值还是传引用? A:Python参数传递采用的肯定是"传对象引用"的方式.这种方式相当于传值和传引用的一种综合.python不允许程序员选择采用传值还 ...

  2. TF-IDF算法与余弦相似性

    (注:本文转载自阮一峰老师的博文,原文地址:http://www.ruanyifeng.com/blog/2013/03/cosine_similarity.html) 今天,我们再来研究另一个相关的 ...

  3. iostat (转https://www.cnblogs.com/ftl1012/p/iostat.html)

    iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.iostat也有一个弱 ...

  4. mysql 按照配置文件启动

      有时,我们的机器上面装了很多个mysql,但只有一个3306端口,其余的mysql服务器需要重新指定端口.我们需要多个配置文件来启动它们.那么我们怎么通过指定配置文件的方式来启动呢?   例如,按 ...

  5. tp3.2判断修改成功

    save方法的返回值是影响的记录数,如果返回false则表示更新出错,因此一定要用恒等来判断是否更新失败. 一开始用这种判断, if (!$edit_flag && $edit_fla ...

  6. SQLite之rowid与sqlite3_last_insert_rowid()

    //返回最后一次insert的rowid,如果没有插入就返回0 (DB session断开后也返回0, 是保存在进程的内存中) SELECT LAST_INSERT_ROWID(); //找到最大的r ...

  7. git 显示文件改动,但无具体改动信息

     事件:        同步代码,进行了换行符替换 过程 : 同步代码,在正式服务器的 git 分支基础上创建新的分支,按照同步代码流程,将对方代码换行符转换(对方mac,我方windows) 替换需 ...

  8. 【百度之星2019】Strassen

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6719 在本题中,我们只有两种方法计算两个的矩阵的乘积,第一种为定义法,需要次乘法和次加法.第二种为 ...

  9. 【转载】【最短路Floyd+KM 最佳匹配】hdu 2448 Mining Station on the Sea

    Mining Station on the Sea Problem Description The ocean is a treasure house of resources and the dev ...

  10. Hinton胶囊网络后最新研究:用“在线蒸馏”训练大规模分布式神经网络

    Hinton胶囊网络后最新研究:用“在线蒸馏”训练大规模分布式神经网络 朱晓霞发表于目标检测和深度学习订阅 457 广告关闭 11.11 智慧上云 云服务器企业新用户优先购,享双11同等价格 立即抢购 ...