正文 

当前位置： 首页 > java > java教程

在vue中使用stylus

SSXfont SSXfont     2022-10-07     185

关键词：

概述

什么是Stylus

  • Stylus是一个CSS预处理器。

什么是CSS预处理器

选型

  • 那么在SaaS，Less和Stylus中，为什么选择后者呢？因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。

配置Stylus环境

安装

  • 命令行中打cnpm install stylus

image.png

在让编辑器支持Stylus

编辑器选型

对于编辑器的选择之前一直没有单独说过，这里稍微提一下，对于写Vue或者前端代码，这里推荐的有三个编辑器

  • WebStorm
  • VSCode
  • Sublime Text

对于电脑配置较高的内存较大的，推荐使用WebStorm，这个编辑器很智能也很庞大，对于电脑配置稍低的，推荐使用后面两个。
另外，在编辑代码时，当时用后两种编辑器时，很依赖各种各样的插件
当你觉得使用的时候很不爽的时候
就去网上搜相应的插件
比如我需要Vue高亮语法的插件，就去搜索安装Vue插件
那么对于Stylus，我们也只需要安装Stylus的插件就可以了。
关于安装插件，这里有几个连接

在编辑器安装支持Stylus

  • 这个就是在编辑器安装Stylus高亮插件，sublime直接在搜索安装Stylus，WebStorm不需要单独安装插件，新建Stylus文件是，只需要New->stylesheet->stylus即可

    PS.Stylus的拓展名是.styl

初次使用

初始化项目

  • vue init webpack stylus
  • cd stylus
  • cnpm install
  • cnpm install stylus --save-dev
  • cnpm install stylus-loader --save-dev

image.png
  • cnpm run dev

使用Stylus

在.vue文件中使用


image.png

引入单独的.styl文件

在写css之前，我新建了几个div

  • 新建.styl文件

image.png
  • 编写Stylus

image.png
  • 引入文件

image.png
  • 查看效果

image.png

你要做的

  • 配置好环境，保证能正常使用Stylus
  • 学习Stylus的基础语法
  • 在开发中使用Stylus的便捷特性

参考教程

vue-cli中使用stylus

 1、在package.json文件中写入依赖："stylus-loader":"^2.5.0","stylus":"0.52.4", 2、在命令行运行npminstall安装插件。 或者直接运行：$npmistylus-loaderstylus--save3、运行 $npmrundev 查看详情

vue使用stylus

在package.json中添加 stylus-loader"css-loader":"^0.28.0","stylus-loader":"^2.1.1","eventsource-polyfill":"^0.9.6", 再重建创建依赖包cnpminstall 查看详情

vue中使用stylus报错问题(代码片段)

已安装stylus-loader、css-loader、style-loaderwebpack已配置：test:/\.css$/,loader:‘style-loader!css-loader!stylus-loader‘.vue文件使用<stylelang="stylus">.containerwidth:1100pxmargin:0auto</style>  查看详情

vue和stylus在subline中显示高亮

...两个插件  VueSyntaxHighlight  和   stylus1.按住ctrl+shift+p2.输入:installPackage3.输入:VueSyntaxHighlight   / 输入： stylus4.重新打开.vue的文件就可以了 安装完毕后：这里还有一个小点要注意，我... 查看详情

stylus在静态页面上的使用经验

...面了，于是将强大的stylus拿过来继续用。于是就写了这篇使用经验，算是自己总结一下。stylus的安装使用前，我们需要在终端里面进行全局安装stylus，这样在项目中可以使用stylus将styl文件解析成css（当然也可以将css反编译成styl... 查看详情

vue--stylus入门使用方法

sizes()15px10pxsizes()[0]//=>15px stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架，2010年产生，来自... 查看详情

使用 vue-loader 和 webpack2 加载 Stylus 库和全局工作表

】使用vue-loader和webpack2加载Stylus库和全局工作表【英文标题】：LoadStyluslibraryandGlobalsheetwithvue-loaderandwebpack2【发布时间】：2017-07-0509:19:56【问题描述】：我正在尝试将我开始使用bourgeontemplate的项目迁移到Quasarframework。在这个过程... 查看详情

如何在 calc 中使用 Stylus 变量？

】如何在calc中使用Stylus变量？【英文标题】：HowtouseaStylusvariableincalc?【发布时间】：2015-11-2304:20:14【问题描述】：在Stylus中，如何在calc表达式中使用variable？例如，以下内容不起作用（arrow-size是一个变量）：arrow-size=5pxleftcalc(50... 查看详情

如何在 calc() 中使用多个变量 Stylus？

】如何在calc()中使用多个变量Stylus？【英文标题】：HowtousemultiplevariablesStylusincalc()?【发布时间】：2016-02-1520:17:15【问题描述】：一切都在标题中。我无法在函数CSScalc()中合并多个Stylus变量。我创建了一个代码Sass，我会在Stylus下... 查看详情

如何在vue中全局引入stylus文件的公共变量(代码片段)

新建一个公共的stylus公共文件添加公共变量，如下：修改下图圈出的文件：具体的修改如下：//generateloaderstringtobeusedwithextracttextpluginfunctiongenerateLoaders(loader,loaderOptions)constloaders=options.usePostCSS?[cssLoader,postcssLoader]:[cssLoader]if(loader)lo... 查看详情

vue使用jade模板写html，stylus写css

vue使用Jade模板写html，stylus写cssvue使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包://安装jade包npminst... 查看详情

vue使用jade模板写html，stylus写css

vue使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包//安装jade包npminstalljadejade-loader--save-dev//如果使用... 查看详情

vue使用stylus样式预处理器

vue使用stylus样式预处理器,样式总是报错，需要从上一行的样式回车换行才不会报错 <stylelang="stylus"scoped>.navbar 　　margin-bottom:1rem 　　&>.nav 　　　　padding:20px </style> 查看详情

stylus基本使用(代码片段)

...stylus给CSS添加了可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循环一系列CSS没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成CSS文件。安装首先，安装stylus（确保之前已经安装nodejs）。... 查看详情

vue2不识别scss,stylus语法解决方法

vue中布局使用scss,stylus，会使代码变得非常简洁<stylelang="stylus">.goodsdisplayflexpositionabsolutetop174pxbottom46pxwidth100%overflowhidden.menu-wrapperflex0080pxwidth80pxbackground#f3f5f7margin-top:2px;.menu- 查看详情

vue中使用css全局样式

在stylus中使用：　　1.在src目录下的assets文件中的styles文件中创建一个varibles.styl文件　　2.在varibles.styl文件中书写代码$bgColor=#00bcd4　　3.在vue组件的style中引入全局样式@import‘../../../assets/styles/varibles.styl‘　　4.使用全局样式.hea... 查看详情

vue引入stylus(代码片段)

 项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。首先，先确定项目中是否有path模块：如果没有path模块需要先安装pathnpminstallpath--s... 查看详情

vue:使用stylusless（包括sublime插件支持）(代码片段)

...pm装个包。npminstallstylusstylus-loader--save-dev然后在.vue文件中使用。<stylelang="stylus">...</style>然后是sublime。需要装两个插件：高亮、自动完成。高亮：https://github.com/billymoon/Stylus自动完成：https://github.com/lnikell/stylus-clean-complet... 查看详情