在前端vue项目引入less,使用less,在less引用外部文件,在less中使用变量
在前端vue项目引入less,使用less,在less引用外部文件,在less中使用变量一、less是什么?二、操作步骤1.引入库2.设置style的lang属性3.使用less总结一、less是什么?Less是一种CSS的扩展和动态样式表语言,CSS预处理器,可以在客户端或服务器端运行,帮助我们自定义,管理和重用网页的样式表。Less是一种开源语言,也是跨浏览器兼容的语言。二、操作步骤1.引入库
·
在前端vue项目引入less,使用less,在less引用外部文件,在less中使用变量
一、less是什么?
Less是一种CSS的扩展和动态样式表语言,CSS预处理器,可以在客户端或服务器端运行,帮助我们自定义,管理和重用网页的样式表。Less是一种开源语言,也是跨浏览器兼容的语言。二、操作步骤
1.引入库
代码如下(示例):
npm install less-loader@4.1.0 --save
完成引入Scss库显示如图
但是在启动项目的时候,依然报错
解决办法
在package.json文件中的dependencies直接写
"less": "^3.11.1",
"less-loader": "^4.1.0",
然后在cmd命令行中输入
npm install
完成之后
在build/webpack.base.conf.js的module属性的rules中配置如下代码
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
保存完成
2.设置style的lang属性
代码如下(示例):
<style lang="less" scoped>
3.使用less
引用外部less文件时,要加@import,且需在末尾加分号
less的变量用 @ 符号
叠加样式
<style lang="less" scoped>
@import "../common/css/bodycss.css";
@import "../common/css/lessTest.less";
@margin: 10px;
#First {
height: 100%;
margin: @margin;
}
less 中的 calc
height:calc(~“100% - 50px”);
总结
good morning更多推荐
已为社区贡献10条内容
所有评论(0)