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样式中设置的颜色

webpack(5)webpack处理css文件的更多相关文章

  1. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  2. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  3. vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?

    我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...

  4. (转)webpack和webpack-simple区别(如何引入css文件)

    博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...

  5. 使用Webpack对Css文件压缩处理的思考

    问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand ...

  6. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  7. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  8. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  9. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  10. webpack生成的css文件background-image url图片无法加载

    之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...

随机推荐

  1. Linux进阶之bond链路聚合

    一.简述: 一般来讲,生产环境必须提供7×24小时的网络传输服务.借助于网卡绑定技术,不仅可以提高网络传输速度,更重要的是,还可以确保在其中一块网卡出现故障时,依然可以正常提供网络服务.假设我们对两块 ...

  2. Boa Web Server 缺陷报告及其修正方法

    综述 Boa 作为一种轻巧实用的 WEB 服务器广泛应用于嵌入式设备上, 但 Boa 对实现动态网页的 CGI  的支持上仍存在一些缺陷, 本文描述了 Boa 对 CGI 的 Status/Locat ...

  3. 面试官问:ZooKeeper 有几种节点类型?别再说 4 种啦!

    本文作者:HelloGitHub-老荀 好久没更新 ZK 的文章了,我想死你们啦.之前发布的 HelloZooKeeper 系列文章完结后,项目收获了将近 600 个 star.这远远超过了我自己的预 ...

  4. html原生js实现99乘法表

    原生的js实现99乘法表实现选择下拉框颜色,改变背景颜色为选中的颜色 <!DOCTYPE html> <html> <head> <meta charset= ...

  5. 用virtualenv建立Python独立开发环境

    1.用pip安装virtualenv sudo apt-get install python-virtualenv 2.1 创建python2的虚拟环境,进入要创建虚拟环境的目录下,我是放在/home ...

  6. Azure DevOps(二)利用Azure DevOps Pipeline 构建基础设施资源

    一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...

  7. Paddle概述

    Paddle概述 本文结合深度学习理论与实践,使用百度飞桨平台实现自然语言处理.计算机视觉及个性化推荐等领域的经典应用. 实践部分使用飞桨深度学习开源框架,适配最新的2.0版本,默认使用动态图编程范式 ...

  8. Visual SLAM

    Visual SLAM 追求直接SLAM技术,而不是使用关键点,直接操作图像强度的跟踪和映射. 作为直接方法,LSD-SLAM使用图像中的所有信息,包括边缘,而基于关键点的方法只能在拐角处使用小块.这 ...

  9. TensorRT原理图示

    TensorRT原理图示 NVIDIA的核心 TensorRT是有助于在NVIDIA图形处理单元(GPU)的高性能推理一个C ++库.它旨在与TensorFlow,Caffe,PyTorch,MXNe ...

  10. ES6深拷贝与浅拷贝

    今天小编和大家一起探讨js中深拷贝和浅拷贝,简单一点理解就是,对于引用数据类型,深拷贝是数据引用地址不同,在改变一个数据的时候,不会影响另一个数据.而浅拷贝刚好相反.两个数据引用的是同一个堆内存地址, ...