vue中如何使用less、stylus

本文介绍如何在Webpack中配置LESS与Stylus加载器,实现样式文件的有效加载及使用。通过安装必要依赖和配置loader,使得项目能够顺利运行,并提供具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、使用less

第一步当然是先安装依赖啦

npm install less less-loader --save

第二步修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,添加

{

    test: /\.less$/,

    loader: "style-loader!css-loader!less-loader",

}

第三步大家就可以愉快的使用了

<template>
    <div>
    
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style lang="less" scoped>

</style>

注:"scoped" 代表<style>标签下的代码只对本页面有效

二、使用stylus

第一步当然也是先安装loader啦

cnpm i stylus-loader -g //可以先将stylus-loader全局安装

安装完loader你会发现使用了stylus项目还是无法启动

第二步将stylus安装到你的项目里

cnpm i stylus stylus-loader --save-dev

第三步你就可以使用啦

<style lang="stylus">
#app
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
.main
  float:left;
  height:100%;
  overflow: hidden;
  width:95%;
</style>

参考链接:http://lesscss.cn/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值