解决vue-cli中stylus无法使用的问题方法

StylusGalaxy 2017-06-19

在写基于vue-cli的vue项目时，遇到一个小坑，css用了stylus，但是在编译时候总是报错：

来来回回折腾了数十次，终于被我折腾好了。。。解决方式如下：

1、在package.json文件中写入依赖：

"stylus-loader": "^2.5.0",
 "stylus": "0.52.4",

然后在命令行运行cmpm i 安装插件。

或者直接运行：

$ cnpm i stylus-loader stylus --save

之后，就是享受成功的喜悦的时候了：

运行

$ npm run dev

解决vue-cli中stylus无法使用的问题方法

在此庆祝下！原来我只是安装了stylus-loader，却没有安装stylus，所以问题一直没有解决，现在终于好了。^_^

: StylusGalaxy

stylus

　　1. stylus是css预处理器,具有对css可编程,编写快速便捷的特性.　 2.stylus源自于Node.js ,2010年产生 , 主要用来给Node项目进行css预处理支持 .　 2.近似脚本的方式去写css ,　　　 language-st

VLilyLUE 0喜欢 / 0评论 2020-06-11

vue项目使用scss

path.resolve, // 是你自己的路径和文件名。然后发现一直报错：this.getResolve is not a function，是因为sass-loader 现在安装的是8.0.0版本的，解决方法：。　　// css中不显示，default

StylusGalaxy 0喜欢 / 0评论 2020-04-29

Stylus 之网教通直播间整修

box-shadow: #0000 0 0 0, #0003 0 0 15px inset;._3nDyqZHz8W > div > div[data-reactid*="$track"]:hover > div {

前端工程师喻文强 0喜欢 / 0评论 2020-04-27

没你想象的那么难！深度剖析三款最实用的css预处理器

css预处理器种类繁多，本次小渡就以Sass、Less、Stylus进行比较。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Less优缺点1.作为目前最流行的css预处理器之一的less，可谓是Sass最强劲的对手，诞生

nicepainkiller 0喜欢 / 0评论 2020-02-23

Vue引入Stylus知识点总结

项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。项目开发阶段经常需要console一些测试数据，查看开发过程中遇到的问题，

xuelang 0喜欢 / 0评论 2020-01-16

vue使用stylus基本布局

. <van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="o

Stylusnebula 0喜欢 / 0评论 2019-12-26

vue的模糊搜索

<input type="text" @input="handleInput" v-model=‘mytext‘>. dataList:[‘dfef‘,‘geger‘,‘fefgw‘],

界之边缘的轮回 0喜欢 / 0评论 2019-12-11

一个vue项目的搭建流程

[cnpm install stylus -g]+[cnpm install stylus stylus-loader --save-dev]

VLilyLUE 0喜欢 / 0评论 2019-12-08

记录移动端开发1像素边框问题， stylus代码转成less

改成less 语法，对照less官方文档，写入 mixin.less文件，引用除了语法的不同，变量定义、方法的调用外，改了一处。问题解决，下班走人！

didianmanong 0喜欢 / 0评论 2019-11-17

CSS之 sass、less、stylus 预处理器的使用方式与区别

　　stylus: 对变量没有任何设定，变量之间可以使用 “=”， “空格”或者 “：”，如: base_font_color: red, borderwidth=1px, borderColor #cacaca. margin: 4px;/* 调用混入语

CaiKanXP 0喜欢 / 0评论 2019-11-10

VSCode 使用 stylus，配置格式化设置

SCode 扩展商店中搜索 stylus Supremacy 进行安装。之后在用户设置 setting.json 配置文件中添加如下配置即可

StylusGalaxy 0喜欢 / 0评论 2019-11-09

react ^16.8.6 添加 stylus & less ; 配置alias别名 @

如果需要 less, 则将此文出现的stylus统统替换为less, 或者追加less, 让stylus与less同时生效。此时重启，可能会报错如下，删除node_modules, 执行yarn重新安装所有的包，重启，通过。

flyingbird 0喜欢 / 0评论 2019-11-08

Gulp watch error Error: watch /home/react-mobile/stylus/ ENOSPC

有疑问或技术交流，扫描公众号一起讨论学习。

星辰的笔记 0喜欢 / 0评论 2016-04-25

移动端通用mixins stylus版

$green = #02a774;$yellow = #F5A100;$bc = #e4e4e4;@media only screen and (-webkit-device-pixel-ratio: 2). @media only screen and

Stylusnebula 0喜欢 / 0评论 2019-08-31

一款自动wxss转换的cli

对小程序进行原生开发时，我不喜欢写wxss，我喜欢写stylus。安装npm i -D|-g wxss-transform使用npx wxss ./src ./dist使用前

碎冰stylus融 0喜欢 / 0评论 2019-07-01

在vue-cli中应用scss/less全局变量

首先需要安装插件：sass-resources-loadernpm i sass-resources-loader --save-devscss: 修改vue-cli的build/utils.js，找到scss的加载设置：return {

zhouyl0 0喜欢 / 0评论 2019-07-01

node写一个小脚本,批量将stylus文件编译成css文件

const fs = require;2.新建一个子进程利用child_process模块3.将stylus文件实时编译成css文件的命令是stylus -w styl -o css将styl文件夹的.styl文件编译到css文件夹下。const { ex

Stylusnebula 0喜欢 / 0评论 2019-07-01

mpVue配置sass全局变量

参考了网上的几种方法，我总结了一种最简洁的的方法：1、确保有安装这3个包sass-loader，node-sass，sass-resources-loader：，没有的话就安装：。npm install sass-resources-loader --sa

crazestylus 0喜欢 / 0评论 2019-07-01

基于 less,sass,stylus三种预处理rem

@{name}: @px / @fontSizeBase * 1rem;.px2rem(fontsize, 750);font-size: 10rem;#{$name}: $px / $fontSizeBase * 1rem;@include px2rem

碎冰stylus融 0喜欢 / 0评论 2019-07-01

大话css预编译处理（三）：基础语法篇

值得庆幸的是，这三款CSS预处理器语言的语法和CSS语法都差不多。这样Sass代码转换成CSS代码变得更容易。默认Sass使用.scss扩展名。

沉着前进 0喜欢 / 0评论 2019-06-30

大话css预编译处理（一）通读介绍篇

CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS

dangzhangjing 0喜欢 / 0评论 2019-06-30

express.js初步

express.js是nodejs的一个web框架。最近比较火的一个框架组合是MEAN,使用这套组合，前后端全被javascript一个语言一统天下了。目前express最新版本是4，替换掉了之前版本3用的中件件库connect，而改用多个更细粒度的库来取

xuelang 0喜欢 / 0评论 2015-07-09

【vuejs开源】vuejs ssr 完美解决方案「vuex，axios，stylus，proxy 」

vuejs ssr 完美解决方案「vuex，axios，stylus，proxy 」博客地址：https://shudong.wang/10227.html

crazestylus 0喜欢 / 0评论 2019-06-30

你不知道的Stylus

最近沉迷学习，把这几天在学的Stylus做个总结。这篇文章对学习Stylus的新手来说应该会有帮助~ 为了让大家代码观赏性更好，这里的代码都以截图的方式呈现，用的IDE是VSCode。介绍Stylus是个非常优秀的CSS预编译器，算是前端工作流的新宠。究竟

碎冰stylus融 0喜欢 / 0评论 2019-06-30

VUE使用Stylus插件

第一次接触stylus对于不使用{} ; 等符号，感觉还不太习惯。而且层级之间的类，也要错落有致，不是统一排一列。但是它更简洁，规范，便于维护。

碎冰stylus融 0喜欢 / 0评论 2019-06-29

H5新人福音~零配置搭建现代化的前端工程

X-BUILD一套基于Webpack快速搭建H5场景开发环境的脚手架，只需要几分钟的时间就可以运行起来。X-BUILD是针对H5开发的一套自动化构建工具，致力于提升开发效率，减小开发难度。它可以让你在没有任何构建工具配置经验的情况下，帮你快速生成一个完整的

Stylusnebula 0喜欢 / 0评论 2019-06-29

学习Stylus

关于stylusstylus是css的预处理框架，是以.styl为后缀的文件，可以创建健壮的，动态的富有表现的css。它用来为css增加一些编程的特性，比如在css中可以使用变量，函数等编程语言的特性，从而是css更加的简洁，适应性更强，代码也更加的直观易

nicepainkiller 0喜欢 / 0评论 2019-06-28

Vue实战

$ vue init webpack my-project项目运行# 开发者模式运行[默认访问：localhost:8080]. - main.js 入口JS依赖stylus$ npm install stylus stylus-loader

crazestylus 0喜欢 / 0评论 2019-06-28

stylus编码规范

详见 https://github.com/leeseean/stylus-style-guide,请多指教和issue。

碎冰stylus融 0喜欢 / 0评论 2019-06-28

Gulp watch error Error: watch /home/react-mobile/stylus/ ENOSPC

[13:25:21] Error: watch /home/react-mobile/stylus/ ENOSPC

json 0喜欢 / 0评论 2016-04-25

vue中使用less、scss、stylus

安装与引入说明：sass从第三代开始放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss. @import './index.styl'基本语法使用名称lessscssstylus变量@$不能用@开头 @topcolor:

man00 0喜欢 / 0评论 2019-06-28

vuejs&electron-vue----朝花夕拾.

————仅以此文记录个人使用vuejs开发项目对一些需求的处理方法,不定期更新...})全局添加sass变量声明npm install -D sass-resources-loader

界之边缘的轮回 0喜欢 / 0评论 2019-06-27

【二次元stylus解放css】用stylus画可爱的小丸子

用stylus画可爱的小丸子之前看了一些关于二次元用css来画卡通图画的文章，都写得非常棒，但是对于我这样一个有密集恐惧症的小白来说相当的头疼，密密麻麻的括弧和标点让人眼花缭乱，最近学习了一些关于stylus的知识，觉得用stylus来写样式相当地简洁，层

wangnantjobj 0喜欢 / 0评论 2019-06-27

小丸子成长记---在stylus下用DIV+CSS一步一步打造小丸子

小丸子成长记程序员没有对象怎么办?但是如果没妹妹呢?哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢?最后效果(一直有种错觉这是旺仔???准备工作npm安装stylus---->npm install -g stylus在项目目录下新建wan

xuelang 0喜欢 / 0评论 2019-06-27

ExpressJS入门指南

六、使用express产生应用Express框架绑定了一个可执行脚本，名为express。如果使用npm对Express框架进行全局安装，那么express到处都能使用。express工具提供了简单的产生应用程序骨架的方式，而且它有一定的使用范围。比如它只

AABBbaby 0喜欢 / 0评论 2014-04-17

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

vue 使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。</style>stylus

realitycss 0喜欢 / 0评论 2019-06-26

谈谈PostCSS

前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？CSS，就是这个看似不起眼的家伙，却在开发中发挥着和js一样重要的作用。css，是一种样式脚本，好

wangnantjobj 0喜欢 / 0评论 2019-06-25

vue 填坑系列总结——scoped

在上个月份的一次使用vue的项目开发的过程中发现了一个很诡异的现象，就是我在<style lang="stylus" scoped> </style>中写样式时发现样式突然间不起作用了，这是为什么？填坑步骤1.当

Stylusnebula 0喜欢 / 0评论 2019-06-21

对比学习sass和stylus的常用功能

在众多的css预处理器语言中，sass和stylus算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异，同时帮助大家更好的掌握这两种预处理语言。本文涉及到的sass部分，均来自于阮一峰老师的SASS用法指南。同时不会对

nicepainkiller 0喜欢 / 0评论 2019-06-21

爱普生系列喷墨打印机手动清零法

保护器计数器即是废墨计数器，它记录了打印机清洁过程中汇集到废墨收集器里废墨的量。随着时间的推移，废黑将会满溢，打印机锁死不能打印。要恢复打印机正常打印功能必须更换废墨垫，将保护器计数器清零。1）关掉电源；　　2）替换废墨垫；　　3）根据不同的机型实施相应复

前端工程师喻文强 0喜欢 / 0评论 2010-09-07

vue.js 实现评价五角星组件的实例代码

并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....

VLilyLUE 0喜欢 / 0评论 2018-08-13

Vue中使用webpack别名的方法实例详解

而因为文件目录是约定俗成的，不可轻易更改，无法修改相对路径。那么该怎么办呢？如，第一个文件夹名为components，那么webpack会自动在alias中搜索有没有对应的别名，如果有，则直接替换路径；没有则报错。在css中，webpack正常情况下，不会

jinxi 0喜欢 / 0评论 2018-06-19

Vue项目中如何引入icon图标

点击进入icomoon网站点击右上角“IcoMoon App”，找到自己需要的图标后选择然后点击右下角“Generate Font”,接着可以在左上角第二个按钮“Preferences”进行自定义你要下载的图标信息，一般我都是进去改一下“Font Name

crazestylus 0喜欢 / 0评论 2018-03-28

vue-star评星组件开发实例

star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护。let score = Math.floor/2; //将数值调整为整数及.5的形式，例：4.3 => 4；4.6 => 4.5

前端工程师喻文强 0喜欢 / 0评论 2018-03-01

vue 使用Jade模板写html,stylus写css的方法

日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。需要简单了解jade基本使用语法 template 需要加上 lang='jade' 属性

JohnnyPig 0喜欢 / 0评论 2018-02-23

在vue项目创建的后初始化首次使用stylus安装方法分享

To install it, you can run: npm install --save !!npm install stylus-loader css-loader style-loader --save-dev安装之后还会报错：。Module bu

碎冰stylus融 0喜欢 / 0评论 2018-01-25

详解vue中引入stylus及报错解决方法

npm install stylus stylus-loader --save-dev这样就安装上了stylus。接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式。此时不仅仅需要npm insta

Stylusnebula 0喜欢 / 0评论 2017-09-22

vue.js移动端tab组件的封装实践实例

本文用到了stylus语法，至于为什么使用stylus而不去用sass，主要是因为stylus来自于Node.js社区。总之stylus是一款高效的CSS预处理器，具体使用不在本文讨论范围。好了，废话不说了，下面讲述怎么封装tababr的切换。我们在安装v

xuelang 0喜欢 / 0评论 2017-06-30

利用Vue v-model实现一个自定义的表单组件

-- 真实情况请将 type改为hidden -->. 4 : 我们使用 {{ btnValue }}来获取自定义组件 counter-btn的值, 这里仅仅是展示效果用

晓月 0喜欢 / 0评论 2017-04-27

解决vue-cli中stylus无法使用的问题方法

相关推荐