vue中如何安装less库

最新推荐文章于 2024-09-22 09:37:59 发布

cx&lavender

最新推荐文章于 2024-09-22 09:37:59 发布

阅读量691

点赞数

分类专栏：插件文章标签： vue.js less 前端

本文链接：https://blog.csdn.net/m0_57391092/article/details/121262029

版权

本文介绍了在Vue项目中如何安装和配置Less，包括在webpack.base.conf.js中修改rules数组来支持Less，以及解决初次安装后由于less-loader版本过高导致的运行错误问题，通过降级less-loader版本来修复。

摘要由CSDN通过智能技术生成

介绍：less是css预处理器，对原先css进行了扩展和补充，可以语法嵌套

使用：

1、安装

npm install less less-loader --save-dev

2、配置，打开 build目录，修改 webpack.base.conf.js 中的相关配置

在 module.exports 中找到 module 中的 rules 数组
添加如下代码：

 module: {
    rules: [
      // less配置
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        op