vue项目配置less

1.安装
npm i less less-loader -S
2.更改配置文件build/webpack.base.conf.js

在module.export暴露的对象中，为module的rules添加如下配置：

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
配置好后如下：

3.使用
在style标签上添加lang属性，指定使用的样式语法；

案例
代码：

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2><span>测试</span></h2>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped lang='less'>
h1, h2 {
font-weight: normal;
span{
color:red
}
}
</style>

在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域有效)
效果：

---------------------
转载自

作者：Beamon__
来源：CSDN
原文：https://blog.csdn.net/beamon__/article/details/83378006

vue项目配置less相关推荐

使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...
新版Vue项目配置项目名称-publicPath-前端_v1.0.2
文件名称版本号作者 qq 版本新版Vue项目配置项目名称-publicPath-前端 v1.0.2 学生宫布 8416837 webpack 4.28.4 文章目录 js配置 js配置定义全局 ...
vue项目设置服务器地址,vue项目配置后端服务器地址
vue项目配置后端服务器地址内容精选换一换查询负载均衡器状态树.可通过该接口查询负载均衡器关联的监听器.后端云服务器组.后端云服务器.健康检查.转发策略.转发规则的主要信息,了解负载均衡器下资源 ...
Vue项目配置本地访问地址和IP访问地址
Vue项目配置本地访问地址和IP访问地址 1.在config/index.js配置: dev: {host: '0.0.0.0', } 2.在build/webpack.dev.config.js更改 ...
SwitchHosts使用和vue项目配置
SwitchHosts使用和vue项目配置 1.解压SwitchHosts到本地电脑上,右键以管理员身份运行exe文件: 2.配置自己需要的域名 3.vue项目中修改配置文件 webpack.dev. ...
vue项目配置eslint(附visio studio code配置)
eslint基础环境搭建全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...
vue项目配置public静态资源路径访问
1.简介一般的vue项目都有一个初始index.html,而其他js.css都是这个html引入的,默认情况下使用绝对路径引入,如/js/app.js 这样就有一个问题,静态资源经常要部署在不同的上 ...
vue项目配置 webpack-obfuscator 进行代码加密混淆
背景公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转 ...
vue项目配置生产、测试和开发环境
目前的 web 项目开发基本都是基于前后端分离的模式. 在实际的开发过程中,从开发到测试完成.发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义 ...
vue项目配置rem移动端适配
一.项目介绍脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件下载插件 npm i ...

vue项目配置less

vue项目配置less相关推荐

最新文章

热门文章