在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代码
Dec 10 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
浅谈vue权限管理实现及流程
Apr 23 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Linux下python3.7.0安装教程
2018/07/30 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
数控专业应届生求职信
2013/11/27 职场文书
老师给学生的表扬信
2014/01/17 职场文书
保护环境倡议书
2014/04/14 职场文书
法院个人总结
2015/03/03 职场文书
2015年政风行风工作总结
2015/04/21 职场文书