vue项目配置less

最新推荐文章于 2025-10-11 19:30:31 发布

原创最新推荐文章于 2025-10-11 19:30:31 发布 · 1.1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #less #配置

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>

效果：