webpack(5)webpack处理css文件[通俗易懂]

webpack(5)webpack处理css文件[通俗易懂]css文件处理-准备工作(以下项目配置都是基于上一篇webpack(4)的基础上)在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。这里我们就在src目录中创建一个n

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

css文件处理-准备工作

(以下项目配置都是基于上一篇webpack(4)的基础上)
在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。

这里我们就在src目录中创建一个normal.css文件,代码如下:

body{
    background-color: aqua;
}

代码很简单,就是将body设置一个背景颜色,但是此时样式是不会生效的,因为我们根本没有引用它,所以我们需要在入口main.js中引入css

// 引用css文件
require('./css/normal.css')

 

安装loader并配置

准备工作处理完后,我们需要安装2个loader

  • style-loader 将模块导出的内容作为样式并添加到 DOM
  • css-loader 加载 CSS 文件并解析 importCSS 文件,最终返回 CSS 代码

安装命令如下:

npm install --save-dev style-loader css-loader

安装完成后我们还需要在webpack.config.js文件中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

注意:这里use列表中的2个loader顺序是不能互换的,因为loader 是从右到左(或从下到上)地取值(evaluate)/执行(execute)。所以上面的示例是先执行css-loader加载样式文件后,再执行style-loader
 

实践结果

最后我们使用npm run build就可以打包成功,然后访问index.html,页面呈现的颜色就是我们normal.css样式中设置的颜色

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165919.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 多进程和多线程区别以及优缺点[通俗易懂]

    多进程和多线程区别以及优缺点[通俗易懂]多进程和多线程主要区别是:线程是进程的子集,一个进程可能由多个线程组成。多进程的数据是分开的、共享复杂,需要用IPC,但同步简单;多线程共享进程数据、共享简单,但同步复杂。多进程,window应用程序中消息有两种送出途径:直接和排队。Windows或某些运行的应用程序可直接发布消息给窗口过程,消息可送到消息列象连续不断轮询消息列队的OS中当前执行的每个进程,事件驱动不是由事件的顺序来控制的,而是由事件的发生来控,而事件的发生是随机的、不确定的,这就允许程序的用户用各种合理的顺序来安排程序的流程。多线

    2022年10月28日
  • error LNK2019: 无法解析的外部符号的几种情况探讨[通俗易懂]

    error LNK2019: 无法解析的外部符号的几种情况探讨[通俗易懂]errorLNK2019:无法解析的外部符号的几种情况探讨。

  • 一个依赖搞定 Spring Boot 反爬虫,防止接口盗刷!

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 责编:乐乐 链接:oschina.net/news/112586/kk-anti-reptile-released …

  • C# DialogResult的用法

    C# DialogResult的用法在程序中,经常会弹出一个对话框来让用户填写一些信息,填写完成后,当用户点击“确定”按钮后,在主窗体中进行其他的处理。比如一个简单的例子,在主窗体中有一个菜单,是“增加用户”,当点击这个菜单之后,我们需要弹出一个增加用户的窗体出来,就假设“增加用户”的窗体叫frmAddUser,那么代码如下:frmAddUserfrm=newfrmAddUser();if(frm…

  • 零拷贝详解_深拷贝和浅拷贝如何实现

    零拷贝详解_深拷贝和浅拷贝如何实现一、概念1、用户态与内核态⽤户态和内核态是操作系统的两种运⾏状态。(1)内核态:处于内核态的CPU可以访问任意的数据,包括外围设备,⽐如⽹卡、硬盘等,处于内核态的CPU可以从⼀个程序切换到另外⼀个程序,并且占⽤CPU不会发⽣抢占情况,⼀般处于特权级0的状态我们称之为内核态。(2)⽤户态:处于⽤户态的CPU只能受限的访问内存,并且不允许访问外围设备,⽤户态下的CPU不允许独占,也就是说CPU能够被其他程序获取。注意:1)为什么要有⽤户态和内核态呢?  这个主要是访问能⼒的限制

  • 简单查询plan

    简单查询plan

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号