vue中使用less

一、首先vue开发环境已经安装成功

二、安装less依赖，npm install less less-loader --save

方法一：使用命令提示符安装

方法二：在webstorm软件项目中安装

npm install less less-loader --save

三、scoped

<style lang="less" scoped>
  .navbar {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  }
</style>

style标签里加上 scoped 为只在此作用域 有效。

样式使用了scoped会导致生成的代码上带有data-v-f1218eb6=""之类的。

这个可选的scoped属性会自动添加一个唯一的属性（比如 data-v-469af010）为组件内css指定作用域。

编译的时候，.navbar会被编译成类似.navbar[data-v-469af010]

例如：

App.vue中引入了Header.vue

在App.vue中添加了scoped，则其中的样式只对App.vue中的html生效，Header.vue中无影响

如果删除scoped，则样式对App.vue和Header.vue都生效

---

原文链接：

https://www.cnblogs.com/lin-dong/p/6711224.html