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 判断指定字符串是否为有效数字
May 11 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
js省市县三级联动效果实例
2020/04/15 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python集合删除多种方法详解
2020/02/10 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python tkinter实现日期选择器
2021/02/22 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
一年级数学教学反思
2014/02/01 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
化工厂员工工作总结
2015/10/15 职场文书
如何撰写创业策划书
2019/06/27 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS