stylus 学习笔记 (重点内容易错部分)

最新推荐文章于 2022-07-05 16:37:34 发布
最新推荐文章于 2022-07-05 16:37:34 发布
阅读量150 收藏
点赞数
分类专栏： css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/docwangsir/article/details/102234810
版权
css 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
vue
9 篇文章 0 订阅
订阅专栏

1.@import 引入的时候相对位置自定义位置前要写~  例如

@import "~common/stylus/index.styl"  因为~ 是 stylus-loader 到哪哪哪  

2. 文件大体构建

另外main.js也要引入
import 'common/stylus/index.styl' 

docwangsir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的预处理框架stylus学习教程
09-24
主要介绍了CSS的预处理框架stylus学习教程,stylus能够在一定程度上减少CSS的代码量,极力推进!需要的朋友可以参考下
vue中引入css的几种方式
weixin_42645716的博客
01-21 3062
1、在main.js中引入 import 'common/stylus/index.styl' 或者 import '@/common/stylus/index.styl' 2、在.vue文件中@import '../../common/stylus/mixin.styl'; 3、在index.html中引入 注： 1.在config目录下的 index.js 里面说明了index.html需要引用的静态资源路径 2.必须放在static目录下面才能引用到 引用 <link rel="styl
vue中 cube-ui 报错 * ./cubeic.ttf in ./node_modules/css-loader??ref--11-oneOf-3-1!./node_modules/postcs
蓝胖子的博客
07-05 965
vue中 cube-ui 报错 * ./cubeic.ttf in ./node_modules/css-loader??ref--11-oneOf-3-1!./node_modules/postcs
前端学习笔记-8.7stylus全局引入报错及解决
qq_43000359的博客
10-06 1039
最近正在做一个项目，遇到了stylus，全局引入是个问题。 解决方案： 注意我的工具是windows7，64位，vue2.0，vue-cli，不同环境可能有所差异 初始时： 文件目录： 首先要在main.js全局引入： 网上有很多解决的方案： 1.要配置文件如下图，我的并不可用，可能是版本号等问题 2.如下图，要加个loader，resolve也要申明，切记莫乱改（此时我的其实已经配置好...
vue中使用cube-ui的Index-List
WarmPure
03-22 3191
需求中有个页面是带导航的List列表，想来这么常见的需求定会有轮子可用，找了一通发现滴滴的开源库cube-ui实现了此功能，但在集成使用的过程中也遇到了一些问题，在此记录。 错误信息： These relative modules were not found: ./cubeic.ttf in ./node_modules/css-loader??ref–11-oneOf-3-1!./nod...
This dependency was not found: * common/stylus/index.styl in ./src/main.js
Shauna_Wu的博客
05-09 3800
This dependency was not found: * common/stylus/index.styl in ./src/main.js
CSS学习笔记之常用Mixin封装实例代码
12-02
个人在做项目的过程中总结归纳的一些常用Mixin，现在分享出来供大家学习。 基于Less编写。但是CSS预处理器都是相通的，你可以很轻易的修改成Sass、Stylus 代码免不了错误和Bug，如果你能帮我修改或者补充 万分感谢！...
lxy1152.github.io:学习笔记整理
03-22
学习笔记整理 在线阅读地址：
bootstrap-stylus
03-22
$ bower install bootstrap-stylus#2.3.2从Stylus编译CSS Bootstrap Stylus将与方便的方法一起使用来处理框架。要使用它，请按照说明安装所需的依赖项，然后运行一些Grunt命令。安装Grunt在命令行中：安装grunt-cli...
stylelint-plugin-stylus:Stylus 的 stylelint 插件
08-04
stylelint-plugin-stylus 插件。 此插件仍处于实验状态 :name_badge: 介绍 插件。 这个插件允许我们使用检查 。 使用的规则查找选择器、声明、at-rule 等的许多错误用法。 查找编码风格违规。 使用自动修复...
This dependency was not found: * common/stylus/index.styl in ./src/main.js To install it, you can ru
luckyone1111的博客
07-04 4218
有如下错误：This dependency was not found:* common/stylus/index.styl in ./src/main.jsTo install it, you can run: npm install --save common/stylus/index.styl 的解决办法是 在 解决：1、首先 npm install stylus-loader stylus...
vue项目中引用样式文件出现： This dependency was not found:
热门推荐
guojing5721的专栏
06-06 1万+
vue项目中引用样式文件出现：This dependency was not found:* common/stylus/index.styl in ./src/main.jsTo install it, you can run: npm install --save common/stylus/index.styl解决办法:在 build\webpack.base.conf.js中resolve...
webpack 编译stylus_Stylus系列——webpack-spritesmith配合stylus使用示例
weixin_27303545的博客
01-17 232
一、前言基于Webpack的CSS Sprites实现方案，若是直接在html中调用雪碧图图标已经很方便，但是实际开发过程可能遇到需要在伪元素中使用雪碧图，或者需要hover切换另一个图标，这种情况下就无法在css中直接调用图标类名。这时，就需要css预处理器，当然不限于stylus，less、sass都是可以的，本文介绍stylus方案。二、项目配置1. 目录结构预览+ node_modules...
vue报错解决及感悟（一）
Interest1_wyt的博客
12-06 1017
项目一开始正常运行，我在加了一个axios调用方法后报错： 1、报错信息如下： This relative module was not found: * ./lib-cov/stylus in ./node_modules/stylus/index.js 2、问题分析：该报错提示缺少关联模块，即在“index.js”中引用了“stylus”，但此时却没找到stylus。正常来说要么是模块没有安装进来，要么就是安装的模块路径不对。如果没有安装，那么根据自己实际使用的模块进行安装解决即可。如果安装了，
前端 html,css 经典面试题 16道 （20220322）
weixin_59519449的博客
03-22 3100
1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。 H5新特性有： 语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket 移除了： 1、显现层元素：basefont 、big、center、font、s、strike、tt、u 2、性能较差元素：fr...
前端面试题（带文字＋代码解析），我不相信你看不懂（2022.11.04）
随便写写
04-06 5850
前端面试题，我发现很多小伙伴都是死背面试八股，原理并不懂，遇到需要思考的题就懵了，所以，我会一道道从文字和代码解析前端的面试题，让大家理解，并且加强自己的水平，天天都会更新
Stylus中文网&Stylus中文文档
weixin_45304927的博客
02-08 4747
Stylus中文文档 & Stylus中文网：https://stylus.comptechs.cn
stylus项目知识点
07-12 98
1、在项目中，引入.sty文件的时候，用来下面方式 1 @import "~common/stylus/variable.styl" ~ 是stylus的写法，参考https://github.com/shama/stylus-loader ~common 表示相对 common，然后我们在 webpack 配置了 common 的 alias，就能找到了它的路径了 转载...
css stylus
最新发布
08-15
Stylus是一种CSS预处理器，它可以让你用更简洁、更强大的语法来编写CSS代码。与Sass和Less类似，Stylus可以通过编译将你的代码转换成普通的CSS文件。相比于直接编写CSS，使用Stylus可以提供更多的功能，例如使用变量、函数等。 如果你想学习Stylus，你可以参考一些资源。Stylus官方中文文档提供了详细的教程和参考资料，可以让你更好地了解Stylus的语法和用法。另外，张鑫旭的网站也提供了一个Stylus文档，其中包含了一些实例和示例代码。 在Stylus中，你可以使用混合器来重复使用一些样式代码。混合器允许你定义一组样式规则，然后将其应用到不同的选择器上。下面是一个典型的混合器应用例子，使用border-radius来生成不同浏览器前缀的border-radius属性。 ``` border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n div border-raduis(10px) ``` 经过编译后，以上代码将生成以下CSS代码： ``` div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } ``` 这个例子展示了如何使用混合器来简化重复的样式代码，以及如何在Stylus中定义和使用函数。如果你想了解更多关于Stylus的用法和技巧，可以参考上述提到的资源。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【stylus】css预处理器stylus的安装以及简单用法](https://blog.csdn.net/meichaoWen/article/details/109309698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [CSS预处理框架——Stylus](https://blog.csdn.net/cainiaoyihao_/article/details/115719282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [css 预编译处理器 - Stylus](https://blog.csdn.net/ZXW_Future/article/details/106207209)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值