vue引入less、sass

引入LESS：

第一步：安装less-loader

npm install less less-loader --save

第二步：全局安装less

npm install -g less

第三步：main.js 全局引入

import Less from 'Less'

第四步：在组件中设置style标签的lang="less"

<template>
  <div id="app">
    <img class="img" src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 160px;
　　//less按dom结构嵌套编写样式，样式结构更加清晰
  .img{
    width: 500px;
  }
}
</style>

引入sass:

第一步：

npm install -D sass-loader node-sass

第二步：在你的 webpack 配置中：

module.exports = {
  module: {
    rules: [
      // ... 忽略其它规则

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件忽略
}

第三步：

　　在 Vue 组件中使用 SCSS：

<style lang="scss">
　　/* 在这里撰写 SCSS */
</style>

vue引入less、sass

推荐阅读