在vue中安装stylus

最新推荐文章于 2024-05-15 10:20:24 发布
最新推荐文章于 2024-05-15 10:20:24 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： 预处理器的使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehuiyuwei/article/details/88900359
版权

什么是stylus

CSS预处理器(less, sass, stylus)是一种语言，用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。说白了就是stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写CSS，执行这一套骚操作之后，这个文件可编译成 CSS 文件。

安装Style前的准备

  1. 安装平台(node.js)
  2. 安装包管理工具(npm)
  3. 安装淘宝的cnpm(不想用淘宝的可以直接使用npm)

安装步骤
4. 安装 stylus 依赖包(stylus和stylus-loader)

cnpm install stylus stylus-loader --save-dev

5.编写组件中的style样式

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

123
其他组件也一样

stylus中文文档

yehuiyuwei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue中引入stylus及报错解决方法
08-29
在使用 Stylus 之前，我们需要在已有的 Vue 项目中安装它。首先确保你已经安装了 Vue CLI 或者手动创建了一个 Vue 项目。如果没有，可以访问 https://cn.vuejs.org/v2/guide/installation.html 安装指南进行设置。 ...
在vue项目创建的后初始化首次使用stylus安装方法分享
08-28
下面小编就为大家分享一篇在vue项目创建的后初始化首次使用stylus安装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 的 style 样式的特性
qq_48557089的博客
11-16 1328
scoped属性 定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。 我们项目中的样式也可以加上如下标签： <style scoped> h1 { color: red; } </style>> 这样，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。 <h1 data-v-3de47834="">1</h1> <style scoped&g.
Vue 中 安装 stylus
前端技术
01-21 1650
先说一下三个重要的地址： git：https://github.com/stylus/stylus stylus npm：https://www.npmjs.com/package/stylus stylus loader ：stylus-loader - npm 需要安装 stylus 和 stylus-loader，下面的命令直接全部安装 npm install stylus stylus-loader --save-dev 最后在文件 package.json devDepende...
vue3.0-style scoped原理
最新发布
地理信息的专栏
05-15 256
vue-style-scoped
Vue 3.2 Released —— Vue3.2正式发布的五大特性
我是张跑跑
08-29 2026
8.10 Vue 3.2 带着 "Quintessential Quintuplets" 正式发布了，一起来看看都有那些新特性吧！！
关于vuecli3脚手架安装stylus无法编译问题
weixin_44234495的博客
11-02 544
关于vuecli3脚手架安装stylus无法编译问题 最新版本的安装npm会默认最新版本 我之前学习报错信息 做一款外卖软件,跟着视频一样 没有出现一点差错,就找了网上很多资料,大多数人是说安装了stylus,loader没有安装,但是我确定我是安装了的 解决办法 这个问题解决我的解决方法是从新用脚手架创建项目,然后在配置里面选择使用stylus就好了 这个事情真的弄了我超级多时间,所以希望新手碰到和我一样的问题可以有所帮助,不要浪费时间 ...
vue3脚手架搭建
征征酱
08-24 4756
安装vue3之前先安装node js 查看node有没有安装可 cmd 1.安装(我使用的是npm 有人喜欢使用yarn yarn global add @vue/cli)这个代码我也放在这里了 2.创建一个项目 输入命令 按下回车的时候 这个时候要注意了 会跳出这个 如果你选择 default 他会一直执行下去下载所有这个自己去试试吧 哈哈 我所说的主要是下面的...
解决vue-cli中stylus无法使用的问题方法
08-30
然而，在使用Vue CLI的过程中，有时会遇到一些技术问题，比如在本例中提到的"vue-cli中stylus无法使用"的问题。Stylus是一种流行的CSS预处理器，它提供了更丰富的语法和功能，如变量、嵌套、函数等，以提升CSS的编写...
vue-cli4创建的vue3项目全局引入.less文件
qq_43510829的博客
04-21 367
首先安装两个依赖 npm npm i style-resources-loader --save npm i vue-cli-plugin-style-resources-loader --save 其次修改 vue 项目根目录下的 vue.config.js 文件，如果没有则自己创建（该文件还有很多妙用，具体可查官网） const path = require("path"); module.exports = { pluginOptions: { "style-resource.
vue 中使用stylus，vux等的介绍和脚手架搭建
qq_34117170的博客
05-21 960
1.使用stylus cnpm install stylus --save-dev cnpm install stylus-loader --save-dev stylus的介绍：http://www.zhangxinxu.com/jq/stylus/ 2.vux npm install vux --save npm install less less-loader --save-...
在vue-cli 3中给stylus、sass样式传入共享的全局变量
12-10
在vue-cli 3中， 给stylus、sass样式传入共享的全局变量 在开发中有时，我们定义了大量的基础样式变量，例如： 大量的vue单文件组件会用到这些变量，每个组件都引人一次又太麻烦。全局引入是个不错的方法，于是，在main.js 中引入variable.styl文件，但是你会发现，并不起作用。 在查阅了vue cli官方文档后发现，有官方支持的方法。 1、给sass样式传入共享的全局变量 有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的  css.loaderOptions 选项。比如你可以这样向所有 Sass
vue 安装stylus
Jinmy的博客
09-25 4052
1.npm install stylus--save 2.npm install stylus-loader --save
二、Vue中安装使用stylus（写css使用）
panchang199266的博客
05-12 2111
1.安装 stylus（写css使用）插件 cnpm install stylus --save cnpm install stylus-loader --save 2.使用案例 使用 stylus 注意事项： 这里我们使用的长度单位是 rem，参照的基准是在上一篇文章中 reset.css 中设置的50px，换算方式如下：在reset.css 中设置了 html font-size: 50...
Vue中使用stylus报错,有可能是版本问题
wsq_5211314
11-26 1599
如果按照正常的流程下载并且配置了stylus,但是依旧报错,那么下面就是解决方法： 一、正常配置stylus流程 安装stylus、stylus-loader依赖(进入项目文件夹下) npm install stylus stylus-loader 1 package.json文件配置(手动添加依赖) "devDependencies": { ... "stylus": "^0.54.8", "stylus-loader": "^3.0.2", .
安装stylus
bbshen_13的博客
03-30 156
TypeError: this.getOptions is not a function (安装stylus) vue需要安装对应的css预处理器，如果是stylus,则安装npm install stylus stylus-loader --save-dev vue 安装stylus 和stylus-loader 提示如下截图错误信息 原因：stylus-loader安装的版本过高解决方案： 1.cnpm uninstall stylus-loader 2.cnpm i stylus-l..
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
Stylus安装及使用
zxw的博客
03-30 2279
1、简介 Stylus是一个CSS预处理器，在VUE项目中一般使用Stylus就足够了，Sass预处理器的node-sass包比较多坑。 2、安装与页面引入 （1）在命令行中依次执行如下命令进行安装 npm install stylus --save npm install stylus-loader --save （2）在style标签中添加lang属性，例： <style lang="stylus"></style> 3、Stylus语法特点 （1）括号可有可无 .hel
解决 vue安装stylus预处理之后出现的错误 npm install --save !!vue-style-loader!css-loader 的问题
BoReFrontEnd的博客
07-12 4519
错误代码提示片段 To install it, you can run: npm install --save !!vue-style-loader!css-loader? 解决方案 npm install stylus stylus-loader style-loader --save-dev 出现下面代码 表示安装成功了 C:\Users\User\Desktop\my.serve&gt...
uniapp 安装stylus
05-30
安装完成后，你需要在`vue.config.js`文件中进行配置，以便uniapp可以识别stylus文件。在`vue.config.js`文件中添加以下代码： ``` css: { loaderOptions: { stylus: { 'resolve url': true, 'import': [ './...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值