vue 中 less 的写法
Vue.js 中使用 Less 是一种常见的做法，它允许在 Vue 组件中使用 Less 样式表。以下是如何在 Vue 中使用 Less：
1. 安装 Less 编译器
<code>npm install --save-dev less less-loader</code>
2. 在 vue.config.js 中配置
在 vue.config.js 文件中，添加以下配置：
立即学习“前端免费学习笔记（深入）”；
<code class="js">module.exports = {
css: {
loaderOptions: {
less: {
// 若有 less 文件中的路径指向其他 less 文件，需要指定 less 文件所在的路径
lessOptions: {
paths: [path.resolve(__dirname, 'src', 'less')]
}
}
}
}
};</code>3. 创建 Less 样式表
在 src 目录下创建一个 .less 文件，例如 style.less：
<code class="less">body {
background-color: #f5f5f5;
}</code>4. 在 Vue 组件中引入 Less
在 Vue 组件的 <style> 标签中，使用 lang="less" 属性来指定该样式表是 Less：
<code class="vue"><template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<style lang="less">
@import "@/style.less";
.hello {
color: red;
}
</style></code>5. 编译 Less
在开发过程中，可以使用 npm run serve 命令启动一个开发服务器，它将自动监听并编译 Less 文件。
在打包部署时，使用 npm run build 命令来构建项目，它将编译 Less 文件并将其包含在最终的构建中。
以上就是vue中less的写法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
336
收藏
