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

最新推荐文章于 2022-02-25 12:49:11 发布

原创最新推荐文章于 2022-02-25 12:49:11 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylus

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何安装及使用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/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

红烧肉在锅里

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决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。...