【vue】webpack中less的配置与编译

Pre：结构

 

 

一、首先通过npm安装less和less-loader

1. npm install less --save-dev

2. npm install less-loader --save-dev 

3. npm install css-loader --save-dev 

4. npm install style-loader --save-dev

 

二、然后在webpack中配置less-loader

  module: {

    rules: [



      {

        test: /\.less$/,

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

      },

    //…

    ]

}

 

 

三、.vue组建中引入自己添加的.less文件，放在了assets中名字叫做todos.less，写一些css代码

 

@input_color: #e6e6e6;

@input_font_weight:300;

@checkbox_img:'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>';

@checkbox_checked_img:'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>';

.todos {

  margin: 0;

  list-style-type: none;

  padding: 0 20px;

  border-top: 1px solid #ccc;

  background: #fff;

  border: 1px solid #ccc;

  box-shadow: 0 10px 30px #ccc;

  position: relative;

  transiton: .3s;



  & input::-webkit-input-placeholder {

    font-style: italic;

    font-weight: @input_font_weight;

    color: @input_color;

  }

  & input::-moz-placeholder {

    font-style: italic;

    font-weight: @input_font_weight;

    color: @input_color;

  }

  & input::-moz-placeholder {

    font-style: italic;

    font-weight: @input_font_weight;

    color: @input_color;

  }

  & input::-ms-input-placeholder {

    font-style: italic;

    font-weight: @input_font_weight;

    color: @input_color;

  }



  & > li {

    cursor: pointer;

    font-size: 24px;

    line-height: 36px;

    padding: 12px 0;

    border-bottom: 1px solid #ededed;

    position: relative;



    &:last-child {

      border-bottom: none;

    }



    &:first-child > input {

      font-size: 24px;

      padding: 10px;

      border: none;

      width: 100%;

      background: transparent;

    }



    & > input[type=checkbox] {

      display: inline-block;

      vertical-align: middle;

      text-align: center;

      width: 40px;

      height: auto;

      position: absolute;

      top: 10px;

      bottom: 0;

      margin: auto 0;

      border: none;

      -webkit-appearance: none;

      appearance: none;

      &:after {

        content: url(@checkbox_img);

      }

    }

    & > time{

      position: absolute;

      right: 60px;

      top: 15px;

      font-size: 9pt;

    }

    & > label {

      display: block;

      vertical-align: middle;

      padding-left: 50px;

      letter-spacing: 2;

    }



    & > button {

      position: absolute;

      right: 5px;

      top: 15px;

      height: 30px;

      width: 30px;

      border: none;

      background: none;

      display: none;

      &:after, &:before {

        content: "";

        position: absolute;

        top: 15px;

        left: 0;

        transform: rotateZ(45deg);

        height: 1px;

        width: 30px;

        background: #cc9a9a;

      }

      &:before {

        transform: rotateZ(-45deg);

      }



    }



    &.checked {

      & > input[type=checkbox] {

        &:after {

          content: url(@checkbox_checked_img);

        }

      }



      & > label {

        color: #d9d9d9;

        text-decoration: line-through;

      }

    }



    &:hover {

      & > button {

        display: block;

      }

    }

  }

}

 

四、记得属性引用

 

<template>

  <div id="app">

  <h1> {{title}}  </h1>

  <ul class="todos">

      <li v-for="(todo,index) in todos" :class="{'checked':todo.done}">

          <label>{{ index+1 }}.{{ todo.value }}</label>

      </li>

  </ul>

  </div>

</template>

<script>

import './assets/todos.less'

export default {

  name: 'app',

  data() {

      return{

          title:"vue-todos",

      todos:[

          {value:"阅读一本关于前端开发的书",done:false},

          {value:"补充范例代码",done:true},

          {value:"写心得",done:false}

      ]

      }

  }

}

</script>

<style></style>