zoukankan      html  css  js  c++  java
  • 使用style-loader和css-loader处理css文件

    webpack本质上只能处理.js文件,也就是它是用来处理.js代码的,它不能直接处理外部样式

    所以我们就需要间接去处理,就需要用到第三方的loader加载器(处理器)

    处理.css文件需要一套加载器  style-loader,css-loader

    安装步骤:

    首先,Ctrl+c,终止批操作处理

     然后在终端输入安装命令: npm i style-loader css-loader -D

    安装完后    需要在webpack中配置添加配置节,配置loader的规则

    先写module,是一个对象,{}表示,它是专门用于配置所有的第三方模块的loader加载器

    在module写一个rules的节点,是一个数组,这里是设置第三方加载器的匹配规则

    在里面写一个对象,test的值用正则表达式来写,(注意,. 是元字符,需要转义,$表示以前面写的一串为结尾)

    use ,test都是规定好的,不能随意更改。

    use后面可以跟一个字符串,也可以跟一个数组。如果指定的加载器有一个,就直接将加载器的名字写在后面就可以了,如果十多个对象就用数组的形式写。

    (如果是数组,顺序需要注意一下,加载器运行时有一定的规则(加载器的运行规则是先来module下面找rules节点,找到以后就说明我们设置了第三方加载器的匹配规则,设置了匹配规则之后,我们就在匹配规则里面遍历数组,遍历的时候,如果遍历的这一个成员正好匹配上我们要处理的文件,这个时候就把use后面的拿出来,来看这里面告诉我们要用什么样的加载器来处理这种类型的文件,它在处理的时候,选择加载器是由后往前选择的。也就是说,在当前这样一个规则下,我如果要处理.css文件,是首先拿css-loader去处理,处理完的结果再交给style-loader再处理,它要经过两次处理,这就是它的工作原理)

     配置完成,再来运行就可以了。

  • 相关阅读:
    创建及修改PDF文件
    Menu控件几个使用方法
    IE不能运行有JS代码的网页处理方法
    SSO实现
    css+div文字底部对齐
    数据控件嵌套的几种方法
    打开及关闭javascript代码
    Excel导出及数据格式化处理
    Menu使用
    在RHEL_5环境,使用centos源
  • 原文地址:https://www.cnblogs.com/mmit/p/12750390.html
Copyright © 2011-2022 走看看