在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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JS字符串截取函数实例
Dec 27 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
antd table按表格里的日期去排序操作
Nov 17 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 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
解决vue 退出动画无效的问题
2020/08/09 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
用Python写一个自动木马程序
2019/09/17 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
金融行业务员的自我评价
2013/12/13 职场文书
《太阳》教学反思
2014/02/21 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
房屋产权证明书
2014/10/15 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle
MySQL批量更新不同表中的数据
2022/05/11 MySQL