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

最新推荐文章于 2024-04-25 23:32:41 发布

_否极泰来_

最新推荐文章于 2024-04-25 23:32:41 发布

阅读量1k

点赞数

分类专栏： # Vue教程

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yuan_xw/article/details/119512949

版权

Vue教程专栏收录该内容

49 篇文章 24 订阅

订阅专栏

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)

_否极泰来_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 教程(二十九)webpack 使用 less 文件

Vue 教程(二十九)webpack 使用 less 文件什么是 LessLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。webpack 处理.less 文件编写.less 文件@charset "UTF-8";@fontSize: 30px;@fontColor: white;body { font-size: @fontSize; color
复制链接

扫一扫