vue stylus的安装及使用方法(报错问题处理)
2023-09-11 14:19:17 时间
首先原网站:https://stylus-lang.com/docs/mixins.html
一、安装stylus
cnpm install stylus --save-dev
二、安装完成截图
三、查看安装成功
stylus -V
四、安装stylus-loader
cnpm install stylus stylus-loader --save-dev
五、修改webpack.base.conf.js
{
test:/.scss$/,
loader:'style-loader!css-loader!scss-loader'
},
{
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader'
}
六、修改package.json
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
七、使用
<template>
<div id="app">
<div class="menu">
<h1>这是一行文字</h1>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
#app
font-family: 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-align: center
color: #2c3e50
margin-top: 60px
.menu
color :red
</style>
效果截图
备注:正常安装以后,应该就可以使用,步骤五、六也许可以省去。
如果经过了这几步,控制台一直报错。可以删除node_modules文件,重新执行 npm install
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- vue之cli脚手架安装和webpack-simple模板项目生成
- 轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
- vue.js3.2.6: 用swipper实现轮播图(swiper@6.8.4)
- vue-cli 本地数据模拟
- 从安装node js到构建一个vue并启动它
- [Vue] Get up and running with vue-router
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue项目JS播放音频音效和背景音乐
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- vue-cli打包之后的项目在nginx的部署
- Linux安装最新版Vue或者指定版本
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例
- 【Vue笔记】Vue中默认插槽slot、具名插槽slot、自定义组件的v-model属性的使用
- vue第十天
- vue-router学习地址
- 关于“import {ref,onMounted} from “vue“
- Vue学习笔记——vue-router
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用