vue中引入less

vue中引入less（注意安装低版本，高版本依赖不支持）

 

npm install less@3.9.0 less-loader@5.0.0 --save-dev

 

main.js中写入

import less from 'less' Vue.use(less)

 

安装成功后，打开 build/webpack.base.conf.js 

 

module.exports = { // 此处省略无数行，已有的的其他的内容

module: { rules: [ // 此处省略无数行，已有的的其他的规则 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } ] } }

使用实例：

les.less中（注意每一句都必须要加分号）

@color:red; @fontSize1:188px; @k:200px;

helloworld.vue中

 

<style lang="less" scoped>
@import url('./les.less');

.hello {
  color: @color;
  font-size: @fontSize1;
}

</style>

 

参考地址：https://blog.csdn.net/qq_41848496/article/details/108522314