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

末蓝、 2023-02-25 03:40 1阅读 0赞

##### 第一步：安装 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`

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 项目安装 scss 以及报错的解决方法

1. 安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass

以你之姓@/ 2023年07月09日 10:25/ 0 赞/ 9 阅读

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

第一步：安装 less 和less-loader npm install less less-loader --save 第二步：修改webpack.base

末蓝、/ 2023年02月25日 03:40/ 0 赞/ 2 阅读

相关 Vue 报错 decorators-legacy 解决方案

安装插件 .babelrc [ "@babel/plugin-proposal-decorators", {

素颜马尾好姑娘i/ 2023年01月23日 06:56/ 0 赞/ 280 阅读

相关 vue3.0 引入极光IM的jmessage-sdk-web报错解决方法

极光IM的jmessage-sdk-web引入 vue框架项目官方社区回答直接把jmessage-sdk-web.js文件放在assets中用 import引入，个人尝试

淩亂°似流年/ 2022年12月17日 01:23/ 0 赞/ 30 阅读

相关 vue中引入mui.js各种报错解决方案

项目中使用到了 mui.js 的顶部滚动条，遇到的一系列坑总结 mui 没有发布npm 版本，需要相关文件可以去这个地址下载[ https://github.com/dcl

阳光穿透心脏的1/2处/ 2022年11月12日 08:27/ 0 赞/ 288 阅读

相关【pyinstaller】打包方法介绍，以及一些报错的解决方法

文章目录一、打包方法 1、pyinstaler参数介绍 2、打包单个.py文件 3、打包多个.py文件二、出现的问

小鱼儿/ 2022年09月09日 14:52/ 0 赞/ 505 阅读

相关 MyBatis 的 4 种引入映射器的方法，及报错解决方案

1.用文件路径引入映射器 <mappers> <mapper resource="xxxMapper.xml"/> </mappe

秒速五厘米/ 2022年06月02日 04:15/ 0 赞/ 209 阅读

相关 vue打包报错:尝试性解决方案

vue打包报错:尝试性解决方案步骤： 1.点击报错的第一条文件路径,跳转到该文件 2.删除此文件所属文件夹 3.ctrl+z恢复之前删除的文件

亦凉/ 2021年11月08日 16:24/ 0 赞/ 371 阅读

相关报错 - 项目直接引入 .scss文件报错及解决方案

近期项目中直接使用了scss 发现报错了，这个导致的原因我到现在都不是很了解，只是大概知道是 node 的原因，不过解决方法已经找到了的。下面分享一下：一、报错

- 日理万妓/ 2021年09月09日 02:32/ 0 赞/ 650 阅读

相关 Vue常见报错及其解决方案

1，如下，让红框中的信息消失掉 ![20190914143602826.png][] 解决方案：在<script>标签里面添加如下两行代码即可 Vue.confi

怼烎@/ 2021年07月25日 23:09/ 0 赞/ 818 阅读