Vue 中使用 Less 样式预处理

在 Vue 中使用 Less

1. 配置单文件组件使用 Less

在 .vue 文件的 标签中设置 lang="less" 并添加 scoped 属性：

<template>
  <div class="login_container">登录组件</div>
</template>

<script>
  export default {};
</script>

<style lang="less" scoped>
  .login_container {
    background-color: #2b4b6b;
  }
</style>

若直接运行报错，提示缺少 loader，需安装相关依赖。

2. 安装 Less 开发依赖

通过包管理器安装 less 和 less-loader：

npm install less less-loader --save-dev

安装完成后重启开发服务器即可生效。

3. 全局样式调整

在 assets 目录下创建 css/global.css 文件，并在 main.js 中导入以重置默认样式：

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}