css预编译stylus以及在vue中使用stylus

最新推荐文章于 2024-05-09 08:00:00 发布
最新推荐文章于 2024-05-09 08:00:00 发布
阅读量384 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 stylus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41766191/article/details/93271780
Stylus是强大的CSS预编译语言，富于表现力、动态且健壮。它支持省略花括号和分号，代码整洁，还支持引入和语法内函数。安装时需用npm安装stylus和stylus-loader，使用方式有在vue的style模块中直接用和引入.styl文件两种。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

引用stylus官网中的一句话：富于表现力、动态的、健壮的 CSS
stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数
mixin.styl:在这里插入图片描述
在这里插入图片描述
使用非常简单
安装stylus，使用npm安装,stylus和stylus-loader，一个都不能少
npm install stylus stylus-loader --save-dev
使用的话分为两种，一种是直接在vue中的style模块中使用，这时在style模块中中规定好就可以了

还有一种是作为.styl文件引入
把css内容放在styl文件中，然后在vue的style模块中通过@import引入
content.styl

在这里插入图片描述

在vue-cli或react脚手架中使用css预编译语言
qq_45149859的博客
07-15 291
使用vue-cli创建的项目，若要使用less，只需要下载less和less-loader即可，不需要变更webpack配置 npm i less less-loader@5.0.0 -S less-loader的版本不能过高，要不会出错
详解vue中引入stylus及报错解决方法
08-29
主要介绍了详解vue中引入stylus及报错解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 预编译stylus
weixin_45685394的博客
09-19 182
stylus是css的预编译语言，用于去掉css中的冒号和分好，例如 .style{ position fixed width 100% z-index 10 } 　　vue的使用方式是需要安装 npm install stylus stylus-loader --save-dev 　　 ...
二、Vue中安装使用stylus（写css使用）
panchang199266的博客
05-12 2176
1.安装 stylus（写css使用）插件 cnpm install stylus --save cnpm install stylus-loader --save 2.使用案例 使用 stylus 注意事项： 这里我们使用的长度单位是 rem，参照的基准是在上一篇文章中 reset.css 中设置的50px，换算方式如下：在reset.css 中设置了 html font-size: 50...
css 预编译器 之 Stylus
weixin_42934446的博客
10-24 416
## 当前主流的三种 css 预编译器 ：Less 、Sass 、Stylus ### Stylus 第一部：安装两个 stylus 依赖包 npm install stylus stylus-loader --save-dev stylus =》 负责将stylus 代码转义成css代码 stylus-loader =》 第二部：编写样式 <style lang="stylus" rel="stylesheet/stylus"> </style> 就...
Vue之vue项目引入并使用stylus预编译器
weixin_40736319的博客
04-16 755
1、安装stylus、stylus-loader依赖 npm install stylus stylus-loader 2、在package.json文件中 在"devDependencies":字段中添加 3、直接在组件页面用即可，组件的style标签中添加属性，lang=stylus 4、stylus预编译器的好处、优点 ...
vue 使用Jade模板写html,stylus写css的方法
11-30
本文主要介绍如何在Vue项目中使用Jade作为HTML模板语言，以及使用Stylus作为CSS预处理器。 首先，要启用Jade（现称为Pug）和Stylus，你需要安装相应的依赖包。如果你的项目是通过Vue CLI创建的，那么Stylus已经默认...
解决vue-cli中stylus无法使用的问题方法
08-30
然而，在使用Vue CLI的过程中，有时会遇到一些技术问题，比如在本例中提到的"vue-cli中stylus无法使用"的问题。Stylus是一种流行的CSS预处理器，它提供了更丰富的语法和功能，如变量、嵌套、函数等，以提升CSS的编写...
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
11-19
在Vue CLI 3.0中，使用预处理器如Sass、Less或Stylus来配置全局变量是一项常见的任务，这可以提升CSS代码的可维护性和复用性。Vue CLI在项目初始化时允许你选择预处理器，但即使未选择，内部的webpack配置也能处理...
vue 2.0开发项目中stylus 的配置和使用
well2049的博客
11-16 2660
其实，之前一直都是css 写样式 的。但是到了vue2.0时代，似乎得换个方式了，看到得教程也都是用stylus，既然可以定义css变量和函数，感觉很牛掰啊！所有也就上手试试。首先是安装 ，在node环境下执行 npm install stylus stylus-loader --save 自己检查package.json 里面是否安装成功。其次，就可以在项目中定义变量了：比如新建一个 myc
记录vue样式穿透的方法 sass/stylus插件 Vue2项目
cf88s8的博客
07-30 721
记录sass/stylus 属性穿透用法
关于可用版本的vue2的stylus-loader兼容版本
sensendedede的博客
01-10 732
1.在package.json的devDependencies里添加上可兼容可用版本。2.并再次使用指令安装。
解决vue-cli中stylus无法使用的问题
程序员青戈
03-03 8791
stylus-loader stylus
vue项目配置less预编译语言
weixin_30546189的博客
04-19 214
当所有东西都 准备好之后 ： 第一步： 安装less依赖，npm install less less-loader --save 第二步：找到webpack配置文件webpack.base.conf.js，在其中的module的rule中增加一项，如下： { test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}第...
css预编译器 ---- 你不知道的Stylus
小柒的前端之旅
10-28 245
前面的话 最近即将迎来一场大考—教资，小柒也在努力奋战。过了这段时间，小柒将继续更新前端知识。这里推荐一点前端干货—Stylus。 干货推荐 Stylus可以我们方便书写css，是富有表现力的、动态的、健壮的CSS。赋予了css可编程的能力。在平时的开发中，可以帮助我们提高效率。 这里小柒推荐张鑫旭大大的Stylus文章 ...
【Stylus详解与引入】
m0_74187147的博客
05-09 1750
Stylus是一个CSS预处理器，它为CSS带来了许多高级功能和更简洁的语法。Stylus的语法类似于Sass和Less，但更加简洁和直观。它允许你使用变量、嵌套规则、混合（mixins）、函数等特性来编写更加模块化和可维护的CSS代码。除了内置的函数外，Stylus还支持自定义函数。这允许你编写可重用的逻辑来处理样式值。rem(n)bodyh1在上面的例子中，我们定义了一个名为rem的自定义函数，用于将像素值转换为rem单位。
Vue进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus
IT全栈 华强工作室
03-14 4513
CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS 预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。...
css预编译方式 vue cli 选不选_手把手教大家搭建一个vue-cli3 的项目
weixin_29022821的博客
02-03 595
首先准备条件: 下载安装 node 和 npm (Vue CLI需要Node.js 8.9或更高版本，官方推荐8.11.0+版本)去官网下载: 傻瓜式安装 (一路回车),好了之后,我们打开cmd 检查一下我们是否安装成功, node -v 如果出现v+数字的形式,说明安装成功 就是v** ,代表的是什么版本,我这个是8.11.3的版本第二步,全局安装 vue/cli $ npm inst...
在Vue项目中如何正确引入并使用Stylus预处理器进行样式编写？
最新发布
11-05
在Vue项目中引入并使用Stylus预处理器可以极大地提升样式的编写效率和可维护性。首先，确保你的项目已安装Stylus相关的依赖包。通常，我们可以通过npm或yarn来安装这些依赖。接下来，你需要在Vue组件中引入Stylus...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值