2024-07-25 记录less在vue项目中的使用方式及配置及常见报错

安装less和加载器

npm install less
npm install less-loader

配置vue.config.js

    css: {

        preprocessorOptions: {

            less: {

                charset: false,

                additionalData: "@import './src/assets/css/global.less';",

            }

        }

    },

编写common.less

@primary-theme-color: #1890ff;
@primary-theme-text-color: #fff;

css里使用：

.box {
  color: @primary-theme-color;  
}

 报错1：Internal server error: [less] missing semi-colon or unrecognised media features on import（内部服务器错误：[less]导入时缺少分号或无法识别的媒体功能）

 原因：vue.config.js配置全局less文件路径时少写了个分号‘；’导致的。

 报错2：[less] Unrecognised input（[less]未识别的输入）

 原因：项目无法识别到less文件，同样是vue.config.js的配置没配好，加上我上面的配置就行了。