vue引入lang=“less“的方法以及报错的解决方案

最新推荐文章于 2025-06-08 00:10:56 发布

落千

最新推荐文章于 2025-06-08 00:10:56 发布

阅读量1.7w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue less 报错解决 sass

本文链接：https://blog.csdn.net/zm_960911/article/details/107252260

Vue 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何在项目中配置Less预处理器，包括安装必要依赖、修改webpack配置文件以及在Vue组件中使用Less。解决常见错误并提供解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：安装 less 和less-loader

npm install less less-loader --save

第二步：修改webpack.base.conf.js文件

找到build文件夹下的webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      //添加部分-----------start---------------------------------
      {
      // 此种方法在控制台中标签样式显示的是style标签样式
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
      },
     //添加部分------------end--------------------------------------
    ]
  },

第三步：使用lang=“less”

<style scoped lang="less">
/*在这里可以直接写样式或者引入less文件*/
@import "../assets/style/hello.less";
</style>

正常到这里就可以开始使用less了，如果运行项目时报错，检查是否存在以下问题。

报错情况：

Module not found: Error: Can't resolve 'sass-resources-loader'
解决方案：

npm install sass-resources-loader --save-dev

然后重新 npm run dev

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

落千

关注关注

10
点赞
踩
27

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue component 中引入less文件报错 Module build failed

10-17

在Vue组件中引入Less文件出现“Module build failed”错误的问题及解决方法在使用Vue框架进行Web开发过程中，开发者可能会遇到一个比较棘手的问题：在Vue组件的`<style>`标签中引入Less文件时，出现“Module build...

vue 使用 lang=“less“ lang=“scss“ 报错 less scss使用

最新发布

小白菜的博客

06-08

826

在前端开发中，Less 是一个非常实用的 CSS 预处理器，它能让我们编写 CSS 代码更加高效和灵活。但在使用过程中，难免会遇到各种错误。本文的目的就是教大家如何识别、处理 Less 中的错误，以及掌握调试的方法，让大家在使用 Less 时能更加得心应手。本文的范围涵盖了 Less 中常见错误类型、错误处理的方式和调试的技巧等方面。

Less入门

把全世界的花都给一个人

03-26

2556

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Less是什么？二、使用步骤1.安装2.使用三、less的特点1.less可用用@关键字来定义变量2.嵌套3.运算4.转义5.内置函数6.引用与映射7.作用域8.注释9.导入前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、Less是什么？ Les.

lang=“less“的含义 scoped的含义

HuiDieDie的博客

03-11

1万+

类样式新敲法敲再多后面也不会崩溃 <style lang="less" scoped> </style> 敲了它们有什么用 lang="less" 可以敲...

vue：style配置scoped、lang、less

helloWorldJavaQi的博客

12-03

662

vue：style配置 scoped：在 2021-12-03 11：47

vue中启动less报错

03-18

在Vue项目中解决Less报错问题通常与版本兼容性、配置冲突或语法错误有关。以下是分步解决方案： --- ### **1. 安装指定版本依赖（关键步骤）** 多数报错由`less-loader`版本过高导致。执行以下命令安装兼容版本： ...

安装lang="less"

07-28

- *3* [vue引入lang=“less“的方法以及报错的解决方案](https://blog.csdn.net/zm_960911/article/details/107252260)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

单独在vue文件中引入主题的less文件

03-21

而局部引入则是在单个Vue文件的style标签中直接引入Less文件，但需要确保配置正确，否则可能会报错。还需要检查语法是否正确，比如在style标签中使用lang="less"，并且确保路径正确。用户可能会遇到路径问题，特别...

03-27

针对Vue项目中CSS加载时出现的ChunkRenderError、Syntax Error和digital envelope routines::unsupported问题，以下是分步解决方案： --- ### **问题根源分析** 1. **digital envelope routines::unsupported** ...

Vue项目中使用lang=“less“报错

高朗的博客

02-22

1万+

具体报错截图 error in .ciews/Main.vue?vue&type=style&index=0&id=c1f1971a&lang=less&scoped=true& Syntax Error: TypeError: this.getOptions is not a function 报错原因在安装less-loader，使用如下命令： npm install --save-dev less-loader less 我们可以package.

Vue中使用less

mingtian_mt的博客

11-16

注：lang=“less”是必须的；scoped表示作用域仅为当前vue文件。在vue文件中，如下使用。

vue 把＜style scoped lang=“less“＞单独写成less文件再导入使用

tenc1239的博客

08-06

1757

【代码】vue 把＜style scoped lang=“less“＞单独写成less文件再导入使用。

vue中使用less方法

Revival_Liang的博客

11-03

2020

第一步：安装less依赖，npm install less less-loader --save 第二步：修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", }, 现在基本上已经安装完

vue中使用less

qq_45669178的博客

10-12

3433

一、less的基本使用二、配置全局样式的less变量一、less的基本使用 1、下载： npm install less --save npm install less-loader --save 2、使用（在vue文件里面直接使用，不用配置） <template> <div class="box"> 你好 </div> </template> <script> export default { } .

error：Vue项目中使用lang=“less“报错

qq_45469341的博客

10-04

1866

error：Vue项目中使用lang=“less“报错

vue搭建项目时没有选择less或是引入lang=“less“时报错

qq_44004011的博客

03-08

1089

如图报错原因： vue在创建项目时没有选择Less 解决办法：安装依赖 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 有的教程可能会让配置build/webpack.confog.js，这一步是不需要的，vue-load已经为我们配置好了 {

关于vue的style标签中使用lang=“less“导致报错问题

weixin_49100429的博客

08-02

3026

问题如下：这个就比较简单了，就是少了less-loader的依赖。安装就可以了，但是在这里有余vue升级到3.0了，所以这里直接iinstall肯定会报错，如下这个是因为版本不兼容问题导致的，那怎么办呢？小编我也是搜索了很多资料，通过不断的报错中总结以下经验，首先去除掉之前的依赖 npm uninstall --save sass-loader npm uninstall --save less-loader npm uninstall --save less 然后严格控制版本下载依赖.