在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作


Posted in Javascript onAugust 10, 2020

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader:

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型,或在 *.vue 文件中这样来使用:

<style scoped lang="stylus">
.personal
 position relative
 .banner-red
  width 100%
  height 100px
</style>

如果你想自动化导入文件 (用于颜色、变量、mixin……),你可以使用 style-resources-loader

vue add style-resources-loader

然后它会让你选择你使用的预处理器

在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

安装完成后选择你使用的预处理器,他会在vue.config.js代码中生成

在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

然后重新启动项目

npm run serve

更详细的请阅读vue-cli3文档

补充知识:vue-cli3构建的项目中vue组件中引入stylus文件时报错解决办法

报错表现

在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

解决办法:

引入文件时路径前增加~

例子:

@import '~common/stylus/mixin.styl';

vue.config.js配置文件中alias的配置

chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@',resolve('src'))
      .set('@assets',resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('common',resolve('src/common'))
      .set('base',resolve('src/base'))
      .set('api',resolve('src/api')),
    config.resolve.symlinks(true)
  }

解释:为何需要增加·~·

~common代表相对于common目录,在webpack中配置了alias来简写common所指向的目录

以上这篇在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 #Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 #Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 #Javascript
js实现计算器功能
Aug 10 #Javascript
js实现盒子拖拽动画效果
Aug 09 #Javascript
js实现盒子移动动画效果
Aug 09 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
python黑魔法之参数传递
2016/02/12 Python
python迭代器与生成器详解
2016/03/10 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
python collections模块的使用
2020/10/16 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
工会换届选举方案
2014/05/21 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
培根随笔读书笔记
2015/07/01 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Pytorch可视化的几种实现方法
2021/06/10 Python