webpack css_webpack打包css文件路径

webpack css_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/165920.html原文链接:https://javaforall.cn

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

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

(0)


相关推荐

  • GET和POST两种基本请求方法的区别「建议收藏」

    GET和POST两种基本请求方法的区别「建议收藏」GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题,你的内心充满了自信和喜悦。 你轻轻松松的给出…

  • 递归简单举例_递归定义举例

    递归简单举例_递归定义举例刚接触递归的同学,可能难以理解递归,难以理解的点可能很多,例如:1.函数为什么可以在自己的内部又调用自己呢?2.既然可以自己调用自己,那么递归运行过程中一定回有很多层相互嵌套,到底什么时候不再嵌套呢?3.递归运行过程中,相互嵌套的多层之间会有参数传递,多层之间是否会相互影响?递归两个要素1.递归边界2.递归的逻辑——递归”公式”递归的过程一定有参数的变化,并且参

    2022年10月28日
  • SqlServer 函数Declare通过传变量查询超慢解决办法

    SqlServer 函数Declare通过传变量查询超慢解决办法from参考:1,Declare传参查询速度慢,直接放入参数执行sql却快,求大牛给原因2,OPTION(RECOMPILE)提高带参数执行SQL语句的索引效率 遇到的问题:通过参数执行sql函数查询速度超慢示例示例代码:class=”lang:tsqldecode:true”>declare@prefixnvarchar(10)=’095-0021-‘;…

  • 手机怎样复制一段文字_微信文章如何整篇复制出来

    手机怎样复制一段文字_微信文章如何整篇复制出来1、网页复制大家应该都遇到过这种情况吧像这种情况怎么办呢,很简单,方法也很多,最简单的就是就地取材。方法一:用翻译获取,我们用鼠标选择一部分后会自动出现翻译,没有出现翻译需要等一到两秒(如果实在没有可以往下看看别的复制方法),我们点击翻译然后会出现一个百度翻译,我们点击百度翻译它会自动跳转到百度翻译页面,我们可以直接复制就行了方法二:用网页控制台,我们F12打开控制台,F12打不开控制台的可以试试Fn+F12,或者右键检查,打开控制台后…

    2022年10月20日
  • 数仓搭建DWD层

    数仓搭建DWD层尚硅谷电商数仓DWD层

  • 标志位简介

    标志位简介标志位简介:标志寄存器,又称程序状态寄存器(它的内容是ProgramStatusWord,PSW).这是一个存放条件码标志,控制标志和系统标志的寄存器.6个状态标志位CF—进位标志,加法时的最高位(D7或D15)产生进位或减法时最高位出现借位,则CF=1,否则CF=0;AF—辅助进位标志,供BCD码使用。当D3位出现进位或借位时AF=1,否则AF=0;

发表回复

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

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