webpack(5)webpack处理css文件
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
文件并解析import
的CSS
文件,最终返回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
样式中设置的颜色
webpack(5)webpack处理css文件的更多相关文章
- webpack模块加载css文件及图片地址
webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...
- 透过现象看webpack处理css文件中图片路径转换的具体过程
webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...
- vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?
我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...
- (转)webpack和webpack-simple区别(如何引入css文件)
博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...
- 使用Webpack对Css文件压缩处理的思考
问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand ...
- webpack项目在开发环境中使用静态css文件
webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- webpack生成的css文件background-image url图片无法加载
之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...
随机推荐
- Linux进阶之bond链路聚合
一.简述: 一般来讲,生产环境必须提供7×24小时的网络传输服务.借助于网卡绑定技术,不仅可以提高网络传输速度,更重要的是,还可以确保在其中一块网卡出现故障时,依然可以正常提供网络服务.假设我们对两块 ...
- Boa Web Server 缺陷报告及其修正方法
综述 Boa 作为一种轻巧实用的 WEB 服务器广泛应用于嵌入式设备上, 但 Boa 对实现动态网页的 CGI 的支持上仍存在一些缺陷, 本文描述了 Boa 对 CGI 的 Status/Locat ...
- 面试官问:ZooKeeper 有几种节点类型?别再说 4 种啦!
本文作者:HelloGitHub-老荀 好久没更新 ZK 的文章了,我想死你们啦.之前发布的 HelloZooKeeper 系列文章完结后,项目收获了将近 600 个 star.这远远超过了我自己的预 ...
- html原生js实现99乘法表
原生的js实现99乘法表实现选择下拉框颜色,改变背景颜色为选中的颜色 <!DOCTYPE html> <html> <head> <meta charset= ...
- 用virtualenv建立Python独立开发环境
1.用pip安装virtualenv sudo apt-get install python-virtualenv 2.1 创建python2的虚拟环境,进入要创建虚拟环境的目录下,我是放在/home ...
- Azure DevOps(二)利用Azure DevOps Pipeline 构建基础设施资源
一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...
- Paddle概述
Paddle概述 本文结合深度学习理论与实践,使用百度飞桨平台实现自然语言处理.计算机视觉及个性化推荐等领域的经典应用. 实践部分使用飞桨深度学习开源框架,适配最新的2.0版本,默认使用动态图编程范式 ...
- Visual SLAM
Visual SLAM 追求直接SLAM技术,而不是使用关键点,直接操作图像强度的跟踪和映射. 作为直接方法,LSD-SLAM使用图像中的所有信息,包括边缘,而基于关键点的方法只能在拐角处使用小块.这 ...
- TensorRT原理图示
TensorRT原理图示 NVIDIA的核心 TensorRT是有助于在NVIDIA图形处理单元(GPU)的高性能推理一个C ++库.它旨在与TensorFlow,Caffe,PyTorch,MXNe ...
- ES6深拷贝与浅拷贝
今天小编和大家一起探讨js中深拷贝和浅拷贝,简单一点理解就是,对于引用数据类型,深拷贝是数据引用地址不同,在改变一个数据的时候,不会影响另一个数据.而浅拷贝刚好相反.两个数据引用的是同一个堆内存地址, ...