[webpack] 处理样式 (二)

news2024/12/24 0:28:48

文章目录

      • 1.介绍
      • 2.处理 Css 资源
        • 2.1 导入包
        • 2.2 功能配置
        • 2.3 添加 Css 资源
      • 3.处理 Less 资源
        • 3.1 导入包
        • 3.2 功能配置
        • 3.3 添加 Less 资源
      • 4.处理 Sass 和 Scss 资源
        • 4.1 导入包
        • 4.2 配置
        • 4.3 添加 Sass 资源
        • 4.4 运行webpack
      • 5.处理 Styl 资源
        • 5.1 导入包
        • 5.2 配置
        • 5.3 添加 Styl 资源
        • 5.4 运行指令

Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源。

1.介绍

Webpack 本身是不能识别样式资源的, 需要借助 Loader 来帮助 Webpack 解析样式资源。

2.处理 Css 资源

2.1 导入包

npm i css-loader style-loader -D
  • css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块。
  • style-loader: 会动态创建一个 Style 标签, 里面放置 Webpack 中 Css 模块内容。

此时样式就会以 Style 标签的形式在页面上生效

2.2 功能配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

在这里插入图片描述

2.3 添加 Css 资源

在这里插入图片描述

src/css/index.css

.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源,Webpack才会对其打包
import "./css/index.css";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

index.html

在这里插入图片描述

npx webpack

在这里插入图片描述

3.处理 Less 资源

3.1 导入包

npm i less-loader -D
  • less-loader: 负责将 Less 文件编译成 Css 文件。

3.2 功能配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3.3 添加 Less 资源

在这里插入图片描述

src/less/index.less

.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

main.js

在这里插入图片描述

index.html

在这里插入图片描述

npx webpack

在这里插入图片描述

4.处理 Sass 和 Scss 资源

4.1 导入包

npm i sass-loader sass -D
  • sass-loader: 负责将 Sass 文件编译成 css 文件
  • sass: sass-loader 依赖 sass 进行编译

4.2 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

在这里插入图片描述

4.3 添加 Sass 资源

src/sass/index.sass

/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

src/sass/index.scss

.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

4.4 运行webpack

npx webpack

在这里插入图片描述

5.处理 Styl 资源

5.1 导入包

npm i stylus-loader -D
  • stylus-loader: 负责将 Styl 文件编译成 Css 文件。

5.2 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

5.3 添加 Styl 资源

src/styl/index.styl

.box 
  width 100px 
  height 100px 
  background-color pink

src/main.js

import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

5.4 运行指令

npx webpack

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/842876.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信开发之自动同意好友的技术实现

简要描述&#xff1a; 同意添加好友 请求URL&#xff1a; http://域名地址/acceptUser 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明…

Jmeter学习和一个关于jmeter获取X-XSRF-TOKEN时的坑

Jmeter学习和一个关于jmeter获取X-XSRF-TOKEN时的坑 现在想对一个接口做性能测试&#xff0c;需要测试它多个线程并发下的调用 1.新建测试计划和线程组 略 2.新建http接口 一个完整的http接口包含请求头和请求&#xff0c;这里就需要两个组件&#xff1a;HTTP request、HT…

c语言函数作为形参的注意事项

1、c语言数组作为形参会退化成数组指针 #include "stdio.h" #include <stdlib.h>//数组作为函数的形参会退化成指针 void print_arr(int a[5]);// int *b int main() {int arr[5] { 1,2,3,4,5 };print_arr(arr);return 0; }void print_arr(int a[5]) {printf…

SocialFi 的开发中如何利用 NFTScan API 获取 NFT 数据

SocialFi 作为社交媒体与 Web3 的创新融合&#xff0c;致力于构建更加开放去中心化的社交平台。它赋能用户拥有数据控制权、实现内容价值&#xff0c;并通过代币经济建立起激励与治理机制&#xff0c;这正是 Web3 社交的独特魅力所在。SocialFi 为我们描绘了一个更加用户驱动、…

从0开始全栈深度学习工程师之路(四):VSCode提效设置和插件

在从0开始深度学习工程师之路&#xff08;三&#xff09;&#xff1a;Python开发环境搭建&#xff08;VSCode) 中,我们一步步搭建了基于VSCode的开发环境&#xff0c;这一篇我们继续优化我们的开发环境&#xff0c;毕竟工欲善其事&#xff0c;必先利其器。 配置 同步设置 我…

GG修改器安装与Root环境的安装

关于GG修改器大家应该都有一定的了解吧&#xff0c;就是类似于电脑端CE的一个软件。 GG修改器在百度云盘里请自行下载&#xff01; 百度网盘链接&#xff1a;https://pan.baidu.com/s/1p3KJRg9oq4s0XzRuEIBH4Q 提取码&#xff1a;vuwj 那我要开始了&#xff01; 本来不想讲GG…

WMS仓储管理系统的价值从哪些方面体现

仓库管理在不断改善&#xff0c;采用信息化来管理仓库。自从使用了WMS仓储管理系统解决方案后&#xff0c;仓库管理的效率大大提高了&#xff0c;而且WMS系统有很多价值。 首先&#xff0c;WMS系统可以帮助员工更省时省力地完成仓库管理工作&#xff0c;提高效率和准确性。传统…

农业大数据可视化平台,让农业数据更直观展现!

农业大数据可视化平台是指利用大数据技术和可视化工具&#xff0c;对农业领域的数据进行收集、整理、分析和展示的平台。它可以帮助农业从业者更好地理解和利用农业数据&#xff0c;提高农业生产效率和决策水平。 农业大数据可视化平台通常具有以下特点和功能&#xff1a; 数据…

WorkTool企微机器人自动接收图片回传(方案三)

自动接收图片并上传到服务器&#xff0c;仅适用企业微信应用 前言 WorkTool企微机器人可以接收客户群的消息&#xff0c;但接收图片一直是个问题&#xff0c;前面也介绍过两种图片接收方案&#xff0c;但都会影响运行效率&#xff0c;并且不能达到100%的图片接收率&#xff0…

配置两台数据库为主从数据库模式

一、主库配置 1、修改配置文件 /etc/my3306.cnf #mysql服务ID&#xff0c;保证整个集群环境中唯一&#xff0c;默认为1server-id1#是否只读&#xff0c;1代表只读&#xff0c;0代表读写read-only0#忽略的数据&#xff0c;指不需要同步的数据库#binlog-ignore-dbmysql#指定同步…

Jmeter命令行运行实例讲解

1. 简介 使用非 GUI 模式&#xff0c;即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资 本文介绍windows下以命令行模式运行的方法。 1.1. 命令介绍 jmeter -n -t <testplan filename> -l <listener filename> 示例&#xff1a; jmeter -n -t test…

承泰科技Q3再获30多个智驾项目,新增订单0.86亿!累计近11亿!

中国毫米波雷达市场正处于高速发展期&#xff0c;以承泰科技为代表的本土供应商在前装量产赛道上展示出加速度。 高工智能汽车研究院预测&#xff0c;随着L2及L2持续处于市场增长的高速期&#xff0c;对应毫米波雷达上车量将在2023年实现30-50%的同比增速。 根据高工智能汽车…

Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)

Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二) 在开始这个专栏&#xff0c;我们需要找一个小程序为参考&#xff0c;参考和仿照其界面&#xff0c;聊天交互模式。 这里参考小程序-小柠AI智能聊天&#xff0c;可自行先体验。 该小程序主要提供了…

轻量级容器管理工具 Containerd

1. 轻量级容器管理工具 Containerd 2. Containerd的两种安装方式 3. Containerd容器镜像管理 4. Containerd数据持久化和网络管理 1. 前言 早在2016年3月&#xff0c;Docker 1.11的Docker Engine里就包含了containerd&#xff0c;而现在则是把containerd从Docker Engine里彻底…

空地协同智能消防系统——无人机、小车协同

1 题目 1.1 任务 设计一个由四旋翼无人机及消防车构成的空地协同智能消防系统。无人机上安装垂直向下的激光笔&#xff0c;用于指示巡逻航迹。巡防区域为40dm48dm。无人机巡逻时可覆盖地面8dm宽度区域。以缩短完成全覆盖巡逻时间为原则&#xff0c;无人机按照规划航线巡逻。发…

8-7 homework

1.思维导图 2.写一个函数&#xff0c;获取用户的uid和gid并使用变量接收

快速降低javacv依赖包的大小

前言&#xff1a; 由于在项目中需要对视频进行缩略图的截图处理&#xff0c;引入了javacv-platform的包&#xff0c;但是打包后发现打出来的jar包非常的大 后面得知是因为javacv-platform会将所有平台的包集中起来处理&#xff0c;导致包特别的大 处理&#xff1a; 我们在项目…

Linux网络配置与测试

不得不会的网络 一、查看网络配置1.1 显示网络接口的信息 ifconfig命令1.1.1 查看所有已启用的网络接口信息1.1.2 查看所有接口&#xff08;包括未启用&#xff09;1.1.3 查看指定网络接口 1.2 显示当前主机名------hostname命令1.3 查看主机中的路由表信息------route命令1.4 …

【并发编程】ShenyuAdmin里面数据同步用到的无锁环形队列LMAX Disruptor并发框架

并发&#xff0c;数据同步往往是业务开发中比较重要的部分。 shenyu网关数据同步设计方案图 shenyu官网给出的同步设计方案图如下&#xff1a; 基于事件异步并发框架com.lmax.disruptor 下载下示例代码&#xff0c;跑起来发现&#xff0c;在shenyuAdmin模块里面用到了com.lma…

UNITY3D 虚拟数字人方向,动捕设备测评 VDSuit-Full

我们成功的用它做了线下演出活动。 开发测试视频 VDSuit-Full动捕开发 分别说优点和不足 优点&#xff1a; 人工技术答疑及时 有厂家解答各种疑难杂症&#xff08;工作日一般1小时就得到回复&#xff09; 比如穿戴&#xff0c;使用方法&#xff0c;限制等。 动作整体捕捉效果较…