web前端使用less

vue-cli3以上中使用less

• 下载less和less-loader
  npm install --save less less-loader
• 在vue.config.js中配置

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}


// module.exports = {
//   css: {
//     loaderOptions: {
//       less: {
//         globalVars: {
//           hack: `true; @import '~@/assets/style/var.less';`
//         }
//       }
//     }
//   }
// };

// const path = require('path');
// module.exports = {
//   pluginOptions: {
//     "style-resources-loader": {
//       preProcessor: "less",
//       patterns: [
//         //这个是加上自己的路径，
//         //注意：试过不能使用别名路径
//         path.resolve(__dirname, "./src/assets/css/base.less")
//       ]
//     }
//   }
// };

• 在vue中写入

vue中使用less遇到的问题

1. 如果报错this.getOptions is not a function原因是安装less-loader版本过高

//先卸载
npm uninstall less-loader
// 再重新安装
npm install [email protected]

然后再重新启动项目

2. 如果不影响页面显示，但是vue中有波浪线提示expected css(css lcurlyexpected)错误

如果使用了 vetur 插件后发现还是无法识别 .vue 中的 less 语法的话，可以看看右下角的语言模式是不是 Vue，如果不是，请改为 Vue

使用less

• 变量，使用@定义

@width: 100%;
@color: pink;
.box{
    width: @width;
    height: @width;
    background: @color;
}

• 变量计算，颜色也可计算

@color: pink;
@num: 100px;
.box{
    width: 200px + @num;
    height: 200px;
    background: @color + #333;
}

• 变量混合，在一个类中调用另一个，可以传参数

.border{
    border: 1px solid @color + red;
}
.box{
    width: 200px;
    height: 200px;
    background: @color + #333;
    .border()
    或者
    .border;
}
传参数
.border(@size: 10px,@color: black){
    border: @size solid @color;
}
.border(5px,blue);

• 嵌套，可以重复使用class名

.box{
    width: 200px;
    height: 200px;
    background: pink;
    .boxCon{
        width: 100px;
        height: 100px;
        background: yellow;
    }
}
.box2{
    width: 200px;
    height: 200px;
    background-color: white;
    .boxCon{
        width: 50px;
        height: 50px;
        background-color: tomato;
    }
}

• 变量作用域

@color: pink;
.box{
    @color: yellow;
    color: @color;
}

• 引用less
  a.less

@color: pink

 @import '../assets/css/a.less';
 .box{
     color:@color;
 }

• 媒体查询

.class {
    width: 200px;
    height: 200px;
    background-color: turquoise;
    @media screen and (min-width: 1000px) {
        background-color: wheat;
    }
}

• 条件判断

.width(@num) when (@num > 100px){
    background-color: black;
}
.width(@num) when (@num <= 100px){
    background-color: white;
}
.width(@num){
    width:@num;
    height: @num;
}
.condition{
    .width(200px)//变量混合，引用其他地方定义的内容，当传入的@num大于100变黑色，小于等于100变白色，做了一个判断
}

在html中使用less

1. 如果是vscode编辑器，可以安装插件Easy LESS，安装后，新建.less文件，在保存时，就会自动生成同名的css文件，直接引入css文件即可。
2. 引入less.js文件和自己创建的less.less文件

@width: 100px;
@color:yellow;
.content{
    width: @width;
    height: @width;
    background-color: @color;
}

要使用服务器打开才行，使用hbuilder打开，或者使用http-server -p 8080(端口号)创建

http-server的使用方法

• 全局安装httpservernpm i http-server -g
• 新建一个文件夹在文件夹中新建html
• 使用cmd进入文件夹
• 使用http-server -p 8080(端口号)创建服务器
• 最后使用http://127.0.0.1:8080打开即可