vue lang=“less“ less

客官°小女子只卖身不卖艺 2023-01-03 14:17 182阅读 0赞

### 文章目录 ###

*   *  vue引入lang=“less“的方法以及报错的解决方案
     *   *  第一步：安装 less 和less-loader
         *  第二步：修改webpack.base.conf.js文件
         *  第三部：使用lang=“less”
         *   *  报错情况：

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

### 第一步：安装 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 条评论，182人围观）

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

相关阅读

相关 vue插件-less、less-loader样式管理

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center] 文章目录 > 说明：有的项目采用的是

迈不过友情╰/ 2024年03月24日 12:23/ 0 赞/ 16 阅读

相关 vue lang=“less“ less

文章目录 vue引入lang=“less“的方法以及报错的解决方案第一步：安装 less 和less-loader

客官°小女子只卖身不卖艺/ 2023年01月03日 14:17/ 0 赞/ 183 阅读

相关 Vue 中引入 Less

1. 安装style-resources-loader vue add style-resources-loader 2. 安装less npm

水深无声/ 2022年12月06日 01:13/ 0 赞/ 137 阅读

相关 vue less 换肤

> 配置几套主题色，通过修改body class来实现，由于我是在组件库中使用的，以下为核心代码 switch-theme 子组件 <template>

川长思鸟来/ 2022年10月20日 13:51/ 0 赞/ 131 阅读

相关【vue】less配置图片

less配置图片参考文章：[https://blog.csdn.net/qq\_39695266/article/details/107693890][https_bl

Myth丶恋晨/ 2022年09月04日 10:55/ 0 赞/ 120 阅读

相关 Vue_实战_安装less

首先，说明一点，如果是使用npm init webpack 项目名的方式创建的项目,无需手动配置webpack 所以再vue中使用less就非常简单了，只需要安装less,

迈不过友情╰/ 2022年05月20日 01:43/ 0 赞/ 422 阅读

相关 vue中使用less

vue中使用less > 首先vue开发环境已经安装成功当所有东西都准备好之后：第一步：安装less依赖，`npm install less less-l

怼烎@/ 2022年04月08日 13:19/ 0 赞/ 316 阅读

相关 vue-less

在vue项目中使用less,正常构建好项目以后 ![1074458-20190617174549253-1657837523.png][] 这时，会发现有报错，因为项目

超、凢脫俗/ 2021年12月21日 09:57/ 0 赞/ 271 阅读

相关 vue 安装使用 less

使用vue-cli2创建的项目，如果直接将style标签中添加lang=“less”，会有一堆报错！！！ <style lang="less" scoped> </s

骑猪看日落/ 2021年11月23日 11:32/ 0 赞/ 392 阅读

相关 vue 使用less

vue中使用less 1、在创建项目时使用less编译或者 1、安装 cnpm install -D less cn

妖狐艹你老母/ 2021年07月24日 15:14/ 0 赞/ 417 阅读