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

忘是亡心i 2021-09-16 02:02 474阅读 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 条评论，474人围观）

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

相关阅读

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

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

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

相关 stylus笔记(doing)

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

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

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

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

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

相关 Vue学习笔记6.1项目开发第一步

第一步安装Node.js 这个直接上官网下载安装完事然后在命令行中输入 node -v 有出现版本号就说明ok 然后输入npm -v 如果也出现版本号那就OK npm

客官°小女子只卖身不卖艺/ 2022年04月23日 11:32/ 0 赞/ 215 阅读

相关 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 赞/ 214 阅读

相关 Stylus基本使用

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

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

相关使用stylus出错

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

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

相关 CSS3- Stylus使用

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

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

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

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

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

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

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

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