uniapp引入less报错如何解决

在uniapp项目中引入less时遇到报错，错误提示如下：Module parse failed: Unexpected character '@'。已经安装了less和less-loader，并在vue.config.js中配置了loader，但依然报错。请问如何正确配置uniapp项目以支持less语法？是否需要其他特殊设置？

2 回复

在项目根目录安装less和less-loader：

npm install less less-loader --save-dev

然后在vue.config.js中配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

在UniApp中引入Less报错通常是由于缺少相关依赖或配置不正确导致的。以下是常见解决方案：

1. 安装Less依赖

npm install less less-loader --save-dev

2. 配置vue.config.js 在项目根目录创建/修改vue.config.js文件：

module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui'],
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            'less-loader'
          ]
        }
      ]
    }
  }
}

3. 在页面中使用Less 在vue文件的style标签中添加lang=“less”：

<style lang="less">
.container {
  color: red;
  .title {
    font-size: 16px;
  }
}
</style>

常见错误及解决：

  • 如果提示“找不到模块”：检查node_modules是否完整，可删除后重新npm install
  • HBuilderX用户：需要在工具-插件安装中安装less编译插件
  • 版本兼容问题：可尝试指定版本
    npm install less@3.12.2 less-loader@6.2.0 --save-dev

注意事项：

  • 确保package.json中已正确添加依赖
  • 重启开发服务器使配置生效
  • 检查项目路径中是否包含特殊字符

完成以上步骤后，重新运行项目即可正常使用Less语法。

回到顶部