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 相关文章推荐
Javascript 构造函数 实例分析
Nov 26 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue组件添加事件@click.native操作
Oct 30 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python方法生成txt标签文件的实例代码
2018/05/10 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python实现自动签到脚本功能
2020/08/20 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
安全员岗位职责
2013/11/11 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
情侣吵架检讨书
2014/02/05 职场文书
工伤赔偿协议书
2014/04/15 职场文书
李培根演讲稿
2014/05/22 职场文书
担保书格式
2015/01/20 职场文书
谢师宴家长致辞
2015/07/27 职场文书