vue-cli项目中 stylus的安装和使用

最新推荐文章于 2022-02-25 12:49:11 发布
最新推荐文章于 2022-02-25 12:49:11 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： stylus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xx02429/article/details/96103556
本文介绍如何安装及使用Stylus CSS预处理器，包括全局与局部安装方法、项目初始化步骤，以及如何在Vue项目中应用Stylus进行样式编写。提供了详细的命令行操作指南。

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

Stylus是一个CSS预处理器。（比较less scss）
安装
cnpm install stylus
或者局部安装（推荐）
cnpm install stylus --save

回车

初始化项目
vue init webpack stylus
cd stylus
cnpm install
cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev
使用stylus
vue文件使用

运行效果


参考文档：https://www.zhangxinxu.com/jq/stylus/

解决vue-cli中stylus无法使用的问题方法
08-30
总的来说，解决Vue CLI中的Stylus无法使用问题主要是理解项目的依赖关系，正确安装和配置相关依赖。这不仅是解决当前问题的关键，也是提升日常开发效率和项目稳定性的重要环节。通过学习这个案例，开发者可以更好地...
vue-cli-plugin-stylus-resources-loader
05-15
开箱即用将stylus-resources-loader包含到您的项目中。 安装 vue add stylus-resources-loader 设定档 在pluginOptions中的pluginOptions下定义资源。 例子 const path = require ( 'path' ) module . exports = ...
vue-cli项目使用stylus
界之边缘的轮回
03-23 535
vue-cli使用stylus 项目下 cnpm install stylus stylus-loader --save-dev style标签内添加lang=”stylus” <style lang="stylus" scoped > ... <style> 可以到这学习stylus——stylus中文文档-张鑫旭...
vue-cli中使用stylus
柏灿的博客
03-29 6976
1、在package.json文件中写入依赖： "stylus-loader": "^2.5.0", "stylus": "0.52.4",1212 2、在命令行运行npm install 安装插件。  或者直接运行： $ npm i stylus-loader stylus --save11 3、运行  $ npm run dev11
vue-cli用stylus
KANE__的博客
07-13 395
安装步骤基于使用vue创建的项目 1.创建完成一个初始项目后，通过 npm install stylus -D 命令，在项目内安装stylus。（注意：命令结尾 -D 即是 --save-dev 的简写形式） 2.需要安装loader，通过 npm install stylus-loader css-loader style-loader --save-dev 命令。 ...
vue-cli配置stylus
土鸡汤来一碗
10-05 966
以webpack模板为例，在webpack的loader配置中，已经做好了stylus的兼容，build/utils.js中已有对loader的配置，但默认没有stylus包和loader包，需要安装： cnpm i stylus -D cnpm i stylus-loader -D 内部stylus vue-cli脚手架搭建的项目中用的是.vue文件，文件里面有三个部分，模板（templ...
vue.js通过cli脚手架安装stylus遇到的坑
求知若渴，虚心若愚，努力前行，未来可期。
05-22 1万+
在上一篇文章中stylus入门中已经介绍了如何安装stylus,但是在vue.js开发中遇到了以下一个问题： 1.通过指令全局安装stylus$ npm install stylus -g虽然全局安装了，但是在vue.js中并没有起到作用; 2.在vue.js的文件中创建了后缀名为.styl的stylus的文件，但是在编译的时候总是会报错错误信息： stylus-loader@2.5.1 req
在vue-cli 3中给stylus、sass样式传入共享的全局变量
10-16
在使用vue-cli 3构建Vue项目时，我们经常需要使用预处理器如Stylus或Sass来编写样式。随着项目规模的扩大，维护全局样式变量变得十分必要，以便于统一管理主题色、字体大小等基础样式。本文将详细介绍如何在vue-cli ...
关于vuecli3脚手架安装stylus无法编译问题
weixin_44234495的博客
11-02 619
关于vuecli3脚手架安装stylus无法编译问题 最新版本的安装npm会默认最新版本 我之前学习报错信息 做一款外卖软件,跟着视频一样 没有出现一点差错,就找了网上很多资料,大多数人是说安装了stylus,loader没有安装,但是我确定我是安装了的 解决办法 这个问题解决我的解决方法是从新用脚手架创建项目,然后在配置里面选择使用stylus就好了 这个事情真的弄了我超级多时间,所以希望新手碰到和我一样的问题可以有所帮助,不要浪费时间 ...
vue-cli安装stylus,sass,less
weixin_45932157的博客
02-25 324
stylus: npm install stylus stylus-loader --save-dev sass: npm install sass sass-loader --save-dev less npm install less less-loader --save-dev
vue stylus的安装及使用方法(报错问题处理)
weixin_42645716的博客
01-21 727
首先原网站：https://stylus-lang.com/docs/mixins.html 一、安装stylus cnpm install stylus --save-dev 二、安装完成截图 三、查看安装成功 stylus -V 四、安装stylus-loader cnpm install stylus stylus-loader --save-dev 五、修改webpack.base.conf.js { test:/.scss$/, loader:'styl
CSS预处理器stylus - 安装与使用
草巾冒小子的博客
11-07 953
CSS预处理器stylus 一、简介 （文章来源于网络总结） css预处理器有Less、Sass（Scss）及Stylus；它们各自的背景如下: 1.Sass： 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。 2.Less...
npm安装stylus和stylus-loader
热门推荐
echo_Ae的博客
06-27 1万+
去到 package.json随便找个地方加上下面这两句话 "stylus-loader": "^3.0.1", "stylus": "0.52.4", 然后去 cmd  运行 cnpm install  (npm install 一样的 我用了淘宝镜像) √ Installed 45 packages √ Linked 0 latest versions √
npm安装stylus错误解决方案
洒家
06-20 3394
最近需要使用stylus，在安装的过程中遇到些错误，这里做一个总结。 安装命令是 npm install stylus stylus-loader --save-dev 运行命令 一直提示 npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer ...
二、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...
stylus安装与配置
小胡仙的博客
05-14 3990
npm install stylus npm i stylus-loader -D webpack配置（vue2.0不需要配置） 打开build中的webpack.base.conf.js 在module中写 { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } 使...
react 配置stylus的方式。
well2049的博客
12-01 3462
其实这个我是按照配置scss的方式搞的，没有想到竟然成功了。 创建完项目后，要执行npm eject 也就是打开全部配置项。 找到config里面的两个配置文档。 配置的内容都是一样的。 关于stylus不多解释，网上太多了。文档后缀是 【 .styl 】{ loader: require.resolve('file-loader'),
工作记录：Stylus基础教程及应用
林恒的博客
09-07 514
前言 传统CSS的缺陷 css的可重用性差、代码冗余量大、不支持语言特性如变量循环及方法等(虽然css也在慢慢支持，比如现在的css变量等，但明显这些远远不够)。 三大预处理 于是预处理器出现了： 2007年，第一款预处理器Sass诞生。Sass是迄今为止最成熟的预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LeSS影响，已经进化到了全面兼容CSS的SCSS。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值