vue项目笔记（6）-使用stylus

忘是亡心i 2021-09-16 02:02 484阅读 0赞

# **vue中使用stylus** #

1、stylus的安装，具体方法：运行以下命令

npm install stylus --save
    
    npm install stylus-loader --save

2、组件中使用的时候，需要声lang="stylus"

<style lang="stylus" scoped>
    </style>

3、stylus中使用变量（以背景颜色为例）

（1）、声明一个基础的样式文件varibles.styl，在需要使用的组件中引入，在该样式文件中，声明变量$bgColor = \#00bcd4;,背景颜色已经设置完成。如下：

header.vue

@import '~styles/varibles.styl'
    .header
      display flex
      line-height 0.86rem
      background $bgColor
      color #fff

4、vue中使用vetur插件整理代码的时候，往往会将stylus语法中的大括号，冒号，分号加上，影响我们css样式的编写。那么，怎么解决这种问题呢？具体方法如下：

打开vsCode-文件-首选项-设置，在右侧的“用户设置”中，加入以下代码，便可解决上述问题，代码风格如下

// 以下为stylus配置
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

.header
      display flex
      line-height 0.86rem
      background $bgColor
      color #fff

发表评论取消回复

表情：

评论列表（有 0 条评论，484人围观）

还没有评论，来说两句吧...

相关阅读

相关 vscode+vue+stylus+github创建新项目

　　// 以下为stylus配置　　"stylusSupremacy.insertColons": false, // 是否插入冒号　　"stylusSupremacy

向右看齐/ 2023年09月24日 09:02/ 0 赞/ 198 阅读

相关 stylus笔记(doing)

stylus笔记笔记：学习记录 [ https://www.zhangxinxu.com/jq/stylus/interpolation.php ][https_w

超、凢脫俗/ 2023年07月25日 08:45/ 0 赞/ 12 阅读

相关 stylus的使用

介绍 stylus，是 CSS 的预处理框架。 stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CS

淩亂°似流年/ 2023年07月17日 06:56/ 0 赞/ 1 阅读

相关 vue-cli脚手架开发项目问题——Cannot find module ‘stylus’

vue项目中使用stylus预处理器写css语法，老是出现 Cannot find module ‘stylus’ 的错误，鼓捣了很久，包括webstorm中配置s

向右看齐/ 2022年06月06日 11:14/ 0 赞/ 204 阅读

相关 Vue学习笔记6.5 项目初始化

1.下载reset.css和border.css然后倒入到vue的项目中 2.安装 fastclick npm install fastclick --save(s

Love The Way You Lie/ 2022年03月18日 09:06/ 0 赞/ 229 阅读

相关 Stylus基本使用

[原文链接][Link 1] 介绍这个哥们儿学名叫 stylus，是 CSS 的预处理框架。 CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处

╰半橙微兮°/ 2021年11月14日 14:32/ 0 赞/ 390 阅读

相关使用stylus出错

引入新 footer.styl 和global.styl文件出现如下错误： ![70][] ![70 1][] ![70 2][] ![70 3][]

一时失言乱红尘/ 2021年10月09日 04:16/ 0 赞/ 343 阅读

相关 CSS3- Stylus使用

选择器传统css写法 body { color: fff; } stylus写法 body col

偏执的太偏执、/ 2021年09月30日 03:12/ 0 赞/ 418 阅读

相关 vue项目笔记（7）-使用iconfont

vue中iconfont的使用步骤 1、进入iconfont官网（[http://www.iconfont.cn][http_www.iconfont.cn]），进入“官

￡神魔★判官ぃ/ 2021年09月16日 02:04/ 0 赞/ 677 阅读

相关 vue项目笔记（6）-使用stylus

vue中使用stylus 1、stylus的安装，具体方法：运行以下命令 npm install stylus --save npm

忘是亡心i/ 2021年09月16日 02:02/ 0 赞/ 485 阅读