vue-cli配置全局sass、less变量的方法


Posted in Javascript onJune 06, 2019

一、全局配置less

1.下载插件

**vue add style-resources-loader**
vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的, yarn源的问题有可能导致失败。如果上面安装失败的话,就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader(前提是已经安装过 less less-loader)
// 没有出错的话,可以无视这里
 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
 或 
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
**

第二步配置vue.config.js

const path = require("path");
  module.exports = {
   ...
   pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
       //这个是加上自己的路径,
       //注意:试过不能使用别名路径
       path.resolve(__dirname, "./src/assets/variable.less")
       ]
     }
   }
   ...
  }

或者使用官网的自动导入在chainWebpack中引入

https://cli.vuejs.org/zh/guid...

二、全局配置sass(直接配置vue.config.js)

注意:官网独爱sass,这种loader的形式只有sass才合适用,其他的(less、stylus)都会报错。

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
       // @是src的别名
       data: `
        @import "@/assets/variable.scss";
       `
      }
    }
  }
  ...
 }

总结

以上所述是小编给大家介绍的vue-cli配置全局sass、less变量的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
vue中keep-alive组件的入门使用教程
Jun 06 #Javascript
vue2配置scss的方法步骤
Jun 06 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
javascript 写类方式之六
2009/07/05 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
教师节促销活动方案
2014/02/14 职场文书
运动会跳远加油稿
2014/02/20 职场文书
新课培训心得体会
2014/09/03 职场文书
效能风暴心得体会
2014/09/04 职场文书
2014年个人委托书范本
2014/10/13 职场文书
北京故宫导游词
2015/01/31 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
JavaScript 原型与原型链详情
2021/11/02 Javascript