style 标签上还有一个 lang 属性，用于定义 css 的编写方式，是否使用 css 预处理器。
如果想使用 css 预处理器 需要先安装对应的 css 预处理器插件。
这里以 less 预处理器为例，安装命令：
npm i less - loader
查看 less 历史版本命令：
npm view less-loader versions
安装 less 指定版本命令：
npm i less - loader @7
注：@ 符后的数字表示你要安装的版本号，以上表示安装 7 点几版本。
安装完成后，设置 lang 属性的值为 less，然后就可以使用 less 来写 css 样式了。
<template> <div class="add"> <h1>添加页面</h1> <p>你好呀！！！</p> </div> </template> <script> export default { name: "Add" } </script> <style lang="less" scoped> .add { h1 { background-color: aqua; } p { font-size: 30px; background-color: blue; } } </style>
以 add.vue 组件为例，样式都可以正常使用。
注：lang 属性的默认值为 css，可以不写 lang 属性 但是不允许设置 lang 属性为空。
<template> <div class="add"> <h1>添加页面</h1> <p>你好呀！！！</p> </div> </template> <script> export default { name: "Add" } </script> <style lang="" scoped> .add{ background-color: aqua; } </style>
注：设置 lang 属性为空时会报错 要么就不写 写了就要定义 css 的编写方式。
原创作者：吴小糖
创作事件：2023.4.6
