vue : 使用stylus less （包括sublime插件支持）

Posted 2021-02-06 foxcharon

版本：

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 3PackagesUserMySnippets，新建文件夹。（我之前已经有了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