vue中如何使用less、stylus

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less使用 #vue中使用less #scoped #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/