vue项目中引入less并使用

最新推荐文章于 2024-09-16 14:15:11 发布

w-somebody

最新推荐文章于 2024-09-16 14:15:11 发布

阅读量2.4k

点赞数 1

文章标签： vue项目中引入less并使用

本文链接：https://blog.csdn.net/qq_37600506/article/details/103066409

版权

1、npm进行安装

npm install less less-loader --save

2、创建less文件,如login.less

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
}

3、在vue文件(如：login.vue)中的style标签将less文件(login.less)引入

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      msg: 'Login'
    }
  },
  methods:{
    login(){
      console.log(111)
      this.$router.push('/index');
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../less/login.less";//scope表示这个less文件只在该组件产生作用
</style>