在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 相关文章推荐
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
JavaScript实现五子棋小游戏
Oct 26 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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
简明json介绍
2008/09/28 Javascript
jquery json 实例代码
2010/12/02 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
package.json文件配置详解
2017/06/15 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python中sets模块的用法实例
2014/09/30 Python
Python列表计数及插入实例
2014/12/17 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
专业销售业务员求职信
2013/11/18 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
企业安全生产检查制度
2015/08/06 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis