webpack css_webpack打包有哪些文件

webpack css_webpack打包有哪些文件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/165386.html原文链接:https://javaforall.cn

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

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

(0)


相关推荐

  • Pytest(1)安装与入门[通俗易懂]

    Pytest(1)安装与入门[通俗易懂]pytest介绍pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高。根据pytest的官方网站介绍,它

  • mysql 如何修改用户密码_如何更改MySQL用户密码

    mysql 如何修改用户密码_如何更改MySQL用户密码在本教程中,我们将向您展示如何更改MySQL用户密码。这些说明应适用于任何现代Linux发行版,例如Ubuntu18.04和CentOS7。先决条件根据系统上运行的MySQL或MariaDB服务器版本,您将需要使用不同的命令来更改用户密码。您可以通过发出以下命令来找到数据库服务器版本:mysql–version如果您的系统中安装了MySQL,则输出将类似于以下内容:mysqlVer14…

  • Navicat8.0注册码「建议收藏」

    Navicat8.0注册码「建议收藏」姓名(Name):3ddown.com组织(Organization):3ddown.com注册码(Serial):NAVJ-W56S-3YUU-MVHV软件下载:链接:https://pan.baidu.com/s/1M7F8YFrlTVEw3aKfDPo0ZA提取码:5q3n复制这段内容后打开百度网盘手机App,操作更方便哦…

    2022年10月13日
  • 网络编程学习笔记一:Socket编程

    网络编程学习笔记一:Socket编程“一切皆Socket!”话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket。——有感于实际编程和开源项目研究。我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠socket?那什么是socket?socket的类型有哪些?还有

  • keil5如何生成bin文件_怎样创建一个文件夹

    keil5如何生成bin文件_怎样创建一个文件夹原因我碰到原因就是SCT加载文件的问题,我定义了不少段,所以导致bin文件变成了文件夹一般的Bin生成方法:在USER里面Run#1加上$K\ARM\ARMCC\bin\fromelf.exe–bin-o”$L@L.bin””#L”,生成错误出现文件夹,如果没有自定义SCT文件就可使用这种方法解决方法Keil里面的fromelf帮助,可以去看看bincombined_base与你自己的起始地址有关,$K\ARM\ARMCC\bin\fromelf.exe–bincombine

发表回复

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

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