vue项目配置less

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

Beamon__

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

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： less 文章标签： vue less 配置

本文链接：https://blog.csdn.net/Beamon__/article/details/83378006

less 专栏收录该内容

5 篇文章

订阅专栏

1.安装

npm i less less-loader -S

2.更改配置文件build/webpack.base.conf.js

在module.export暴露的对象中，为module的rules添加如下配置：

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
},

配置好后如下：

3.使用

在style标签上添加lang属性，指定使用的样式语法；

<style scoped lang='less'>
</style>

案例

代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2><span>测试</span></h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style scoped lang='less'>
h1, h2 {
  font-weight: normal;
  span{
    color:red
  }
}
</style>

效果：