vue : 使用stylus less (包括sublime插件支持)

版本:

vue 2.5.2

webpack 3.6.0

先说stylus。

用npm装个包。

npm install stylus stylus-loader  --save-dev

然后在.vue文件中使用。

<style lang="stylus">
...
</style>

然后是sublime。需要装两个插件:高亮、自动完成。

高亮:https://github.com/billymoon/Stylus

自动完成:https://github.com/lnikell/stylus-clean-completions

如果你的网络和我一样连不上sublime的服务器,那么装自动完成插件会稍微麻烦一点...因为这个插件是一个.sublime-completions文件,这个文件直接放到package文件夹是不会起作用的。

正确的使用方法:你的安装路径\Sublime Text 3\Packages\User\MySnippets,新建文件夹。(我之前已经有了User文件夹,所以新建MySnippets就行了)。然后,把github上stylus.sublime-completions文件粘贴进去。

这样就可以了。

如果你了解sublime自动完成(Snippet),你也可以根据需要改写这个文件...

再说less。

用npm装个包。注意的是,less不要装最新版,装2.7.3版。

npm install [email protected] less-loader  --save-dev

然后在.vue文件中使用。

<style lang="less">
...
</style>

这样就可以了。

注意,有的博客会让你加less-loader。

在我这个版本的vue-webpack模板里,各种格式的样式文件已经配置过了,所以加less-loader是错误且没有必要的。

然后是sublime。装一个插件就全搞定了。

https://github.com/danro/LESS-sublime

原文地址:https://www.cnblogs.com/foxcharon/p/10335844.html

时间: 2024-10-03 14:24:42

vue : 使用stylus less (包括sublime插件支持)的相关文章

Sublime插件支持Sass编译和Babel解析ES6 &amp; .sublime-build文件初探(转载自imwtr)

原文请看:http://www.cnblogs.com/imwtr/p/6010550.html 用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方便的工具,不用配置太多 哈哈哈哈但我还是更喜欢用ST 如果要将Sass编译成css文件,安装相应的编译工具就行,然后在命令行直接sass a.scss:b.css 编译就行了 要将ES6解析成ES5的语

Sublime插件支持Sass编译和Babel解析ES6 &amp; .sublime-build文件初探

用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方便的工具,不用配置太多 哈哈哈哈但我还是更喜欢用ST 如果要将Sass编译成css文件,安装相应的编译工具就行,然后在命令行直接sass a.scss:b.css 编译就行了 要将ES6解析成ES5的语法形式,同样的安装好babel工具,命令行执行 babel a.js -o b.js 即可 但始终

sublime Text3支持vue高亮,sublime Text3格式化Vue

第一:让sublime Text3支持Vue高亮 PS:我的sublime版本是3126,我不清楚其它版本的是不是这样设置,不过可以看看思路自己摸索下 1.下载可以让vue格式高亮的插件vue-syntax-highlight github链接 我下载好的插件包,为避免插件的更新,还是建议用上面的方式,从github上下载 ,插件包下载 2.把插件放到sublime中 菜单  设置 --> 浏览资源包 打开了此文件夹 在这个文件夹中新建一个文件夹,改名为Vue.下载的插件安装包解压缩后,把里面的

Sublime插件库新成员基于APICloud快速开发跨平台App

互联网时代强调用户体验,那什么是HTML5跨平台App开发者的编程体验?"不剥夺.不替换开发者喜欢的开发工具,就是人性化的用户体验",APICloud给出了这样的答案! 重磅发布"多开发工具支持策略" "如果,你以为此次分享会APICloud只是讲解Eclipse开源插件代码经验,那就大错特错了!"APICloud CEO刘鑫以调侃的话进行了开场. 经过一年的上线摸索,APICloud团队充分的认识到"剥夺开发者已经习惯的开发工具,替换

sublime 插件(侧重JavaScript)

Sublime Text几乎是任何开发者在其工具箱的必备应用程序.Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器,例如Vim和Emacs(具有陡峭的学习曲线). Sublime Text如此受欢迎的其中一个原因就是它的可扩展插件架构.这使得开发人员可以轻松使用新功能,例如代码完成,或远程API文档嵌入,来扩展Sublime的核心功能.Sublime Text的插件并不是开箱即用的--通常需要通过一个叫Pack

非常实用的Sublime插件集合 – sublime推荐必备插件

插件介绍 ***PackageControl*** 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用方法: 1.安装好控制台,如有不能正常调用 Package Control,可以参考上一篇文章内容解决. 解决方案: https://www.cnblogs.com/show2008/p/10882891.html 2.启动插件:按快捷方式 Ctrl+Shift+P  打开 Package Control 窗口(左图) 输入查询 Install Pack

Sublime Text3 支持Less

1.安装Sublime 插件 (1)安装LESS插件:因为Sublime不支持Less语法高亮,所以,先安装这个插件,方法: ctrl+shift+p>install Package>输入less按Enter (2)安装LESS2CSS插件:这个插件的作用是 当保存less文件的时候自动生成同名的css文件: 当保存less文件的时候提示编译错误信息: 批量编译项目目录下的所有less文件为css文件. 安装方法:ctrl+shift+p>install Package>输入les

我使用的Sublime插件及配置

我使用的Sublime插件及配置 增强型插件 Package Control 快捷键ctrl+~,调出命令行,运行: import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path();

sublime插件emmet的配置、使用及快捷键Ctrl+E修改成Tab键操作

一.emmet在sublime中的配置与使用: 1.点击sublime text 3的图标,打开编辑器: 2.按键“ctrl+shift+p”,或者单击菜单->工具->命令面板: 3.打开了命令面板,输入“pcip”(package control install package)四个单词的首字母: 4.即可出现新的安装package的面板,搜索emmet: 5.如搜索列表,第一个就是,虽然描述里说明的是sublime text 2 的plugin,但依然支持sublime text 3.选中