vue-Electron配置less或sass全局变量
我们经常⽤less或者sass定义⼀些全局变量，⽐如头部的⾼度，⽐如主题的颜⾊，⽐如侧边栏的宽度，这时我们定义less 或者sass全局⽂件是有必要的，那如何在vue-electron中使⽤呢？
我门这⾥需要先下载安装less或者sass.下⾯是下载less的命令
npm install less less-loader --save-dev
⾸先：下载sass-resources-loader
不论是你使⽤的less或者sass都需要下载sass-resources-loader包,npm命令如下:
npm install sass-resources-loader --save-dev
⾸先我们先讲less在vue-electron中的使⽤⽅法
1、我们在.fig.js中的module配置中到如下代码
module:{
rules:[
{
test:/\.less$/,
use:['vue-style-loader','css-loader','less-loader']
}
]
},
2、然后修改代码将这段代码修改如下
module:{
rules:[
{
test:/\.less$/,
electron vue教程use:[
'vue-style-loader',
'css-loader',
'less-loader',
{
loader:'sass-resources-loader',
options:{
resources: solve(__dirname,'../src/renderer/assets/less/common.less'),//改路径为存放less全局变量的路径
}
}
]
}
]
},
注意resources后的⽂件路径为你存放less全局变量的路径,
注意resources的路径⼀定要是绝对路径，不然很可能不到全局样式⽂件
此时就可以在你定义的common.less⽂件中声明变量，例如
@navColor: red;
@imgHeight: 50px;
然后就可在任意的组件中使⽤common.less⽂件中声明的变量例如
<style scoped lang="less">
.nav-bar{
background-color: @navColor;
}
</style>
其次我们说sass的使⽤⽅法;
道理与less⽅法基本⼀致
1、同样在.fig.js中的module配置中到如下代码
module:{
rules:[
{
test:/\.scss$/,
use:['vue-style-loader','css-loader','sass-loader']
},
]
},
2、然后修改代码将这段代码修改如下
module:{
rules:[
{
test:/\.scss$/,
use:[
'vue-style-loader',
'css-loader',
'less-loader',
{
loader:'sass-resources-loader',
options:{
resources: solve(__dirname,'../src/renderer/assets/less/common.sass'),//改路径为存放sass全局变量的路径}
}
]
}
]
},
下⾯与上⾯⽅法⼀致，只是将common.less⽂件的后缀名换为.sass即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。