Vue 教程(二十九)webpack 使用 less 文件

Posted 2021-09-04 _否极泰来_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(二十九)webpack 使用 less 文件相关的知识，希望对你有一定的参考价值。

Vue 教程(二十九)webpack 使用 less 文件

什么是 Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

webpack 处理.less 文件

编写.less 文件

@charset "UTF-8";
@fontSize: 30px;
@fontColor: white;

body {
  font-size: @fontSize;
  color: @fontColor;
}

main.js 中进行引用

// 加载依赖less文件
require("./css/special.less");

index.html 添加文字

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>webpack基础使用</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
    <span>欢迎使用【鸿雁】网上购物系统</span>
  </body>
</html>

在 webpack.config.js 配置

// 导入Node中path常量
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\\.(css|less)$/,
        /**
         * css-loader:只负责将css文件进行加载
         * style-loader:负责将样式添加到DOM中
         * 使用多个loader时,是从右向左
         */
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

安装 less 和 less-loader：

npm install npm install --save-dev less-loader@4.1.0 less@3.9.0

npm run buill 进行打包
```
npm run build
```

查看效果

– 以上为《Vue 教程(二十九)webpack 使用 less 文件》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue 教程(二十九)webpack 使用 less 文件的主要内容，如果未能解决你的问题，请参考以下文章

Vue 教程(二十八)webpack 使用 css 文件

Vue 教程(二十六)webpack 基本使用

Vue 教程(二十七)webpack 配置文件 webpack.config.js

Vue 教程(二十五)webpack 安装

跨平台应用开发进阶(二十九) ：uni-app 实现Android原生APP-云打包集成神策详细教程

Vue2.0学习—理解MVVM（二十九）