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定时器完整实例
Feb 10 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
react 组件传值的三种方法
Jun 03 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
浅谈js中的bind
2019/03/18 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python 实现图片批量压缩的示例
2020/12/18 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
高级编程求职信模板
2014/02/16 职场文书
竞聘书格式及范文
2014/03/31 职场文书
卖车协议书
2014/04/21 职场文书
村委会换届选举方案
2014/05/03 职场文书
电子信息工程自荐信
2014/05/26 职场文书
求职信的正确写法
2014/07/10 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
单位作风建设自查报告
2014/10/23 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android