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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
解决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
基于mysql的论坛(3)
2006/10/09 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php实现倒计时效果
2015/12/19 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python实现注册、登录小程序功能
2018/09/21 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python线程指南分享
2019/11/19 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
给领导的致歉信范文
2014/01/13 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
党支部综合考察材料
2014/05/19 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js