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 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
js实现筛选功能
Nov 24 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
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
asp 的 分词实现代码
2007/05/24 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
一篇不错的Python入门教程
2007/02/08 Python
python 数据加密代码
2008/12/24 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python实现智能语音天气预报
2019/12/02 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
香港士多网上超级市场:Ztore
2021/01/09 全球购物
本科毕业生自荐信
2014/06/02 职场文书
个人委托书范文
2015/01/28 职场文书
信息技术国培研修日志
2015/11/13 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers