<!--本节   loader配置处理css样式

   在src下新建css文件夹   在css下创建index.css
在main.js这个入口文件中 引入js模块 和 css杨思表是不同的 在main.js文件中 import './css/index.css' 注意:webpack默认只能打包处理JS类型的文件 无法处理其他的非JS类型的文件
如果处理其他非js类型的文件 需要安装第三方的loader加载器
cnpm i style-loader css-loader -D 需要安装两个加载器 这个凉饿模块处理css 打开webpack.config.js这个文件
在里面新增一个配置的节点,是module他是一个对象,在module这个对象上,
有一个属性rules,这个属性是一个数组,在这个数组中,存放了所有的第三方文件的匹配和处理规则 webpack.config.js文件如下
module:{ //这个节点 用于配置 所有的第三方 加载器 rules:[ //所有第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader','css-loader']}
]
} ps==>test中loader的加载规则是从右向左的哦 先加载css-loader 在加载style-loader

07webpack--下载对应的css模块的更多相关文章

  1. Pure – 赞!轻量的、响应式的 CSS 模块集

    Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中.充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑. Pure 基于 Normaliz ...

  2. [转]CSS 模块

    CSS 模块 如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 NationJS 大会上做的名称为 CSS in JS 的分享.不 ...

  3. CSS 模块的侦测

    CSS 的规格发展太快,新的模块层出不穷.不同浏览器的不同版本,对 CSS 模块的支持情况都不一样.有时候,需要知道当前浏览器是否支持某个模块,这就叫做“CSS模块的侦测”. 一个比较普遍适用的方法是 ...

  4. [翻译]CSS模块-未来的编码方式

    前言 这是Glen Maddern发布于2015年8月19日的一篇文章,主要是之前翻译的文章<理解CSS模块方法>里提到这篇文章,现在算是顺藤摸瓜跟进来看看. 这里的翻译都是根据我自己的理 ...

  5. [翻译]理解CSS模块方法

    在这个前端发展日新月异的世界,能够找到有所影响的概念相当困难,而将其准确无误的传达,让人们愿意尝试,更是难上加难. 拿CSS来看,在我们写CSS时,工具侧最大的变化,也就是CSS处理器的使用,如:可能 ...

  6. Webpack4 学习笔记二 CSS模块转换

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...

  7. 第5章 网页下载器和urllib2模块

    网页下载器:将互联网上URL对应的网页下载到本地的工具 通过网页下载器将互联网中的url网页,存储到本地或内存字符串 python有哪几种网页下载器? 1.urllib2  python官方基础模块 ...

  8. 51CTO下载-html+javascript+css学习宝典

    一.html知识 1. meta标签 Meta: 提供网页信息,搜索引擎使用 <meta name=“aa” content=“bbb”> <meta http-equiv=“exp ...

  9. 下载网站js css img 资源

随机推荐

  1. python 画小猪佩奇

    转自:python画个小猪佩奇 # -*- coding: utf-8 -*- """ Created on Mon May 20 11:36:03 2019 @auth ...

  2. CentOs篇

    Advanced-高级配置.Security-安全.Boot-启动引导: 1.Removable Devices-移动设备 2.Hard Drive-本地硬盘 3.CD-ROM- Drive-光盘 4 ...

  3. IntelliJ IDEA 创建动态的JavaWeb工程(五)

    1. 创建动态的web项目 如果创建项目后没有自动创建web文件夹,即没有自动创建 web.xml 及 index.jsp 文件,还可以通过IDEA编辑器中的File -- Project Struc ...

  4. Python paramiko 报错 paramiko.ssh_exception.SSHException: not a valid RSA private key file

    报错的原因是选择的文件不是一个有效的 RSA 密钥文件 现在通过 ssh-keygen 默认生成的密钥文件是新的格式,并非 RSA 格式.打开文件可以看到是以 -----BEGIN OPENSSH P ...

  5. hdu 6495 dp

    http://acm.hdu.edu.cn/showproblem.php?pid=6495 题意 有n个挑战(1e3),假如接受,在挑战之前体力x会变成min(x,\(b[i]\)),然后会减去a[ ...

  6. [PKUSC2018]最大前缀和(状压DP)

    题目大意:求给定的 $n$ 个数的所有排列的最大前缀和(不能为空)之和对 $10^9+7$ 取模的值. $1\le n\le 20,1\le\sum|a_i|\le 10^9$. 神级DP.杂题选讲的 ...

  7. Paper | A Pseudo-Blind Convolutional Neural Network for the Reduction of Compression Artifacts

    目录 非盲增强网络结构 训练目标 压缩系数预测子网络 网络结构 根据块QP判决结果得到帧QP预测结果 保持时序连续性 实验 发表在2019年TCSVT. 本文提出了一个兼具 预测压缩系数 和 非盲去压 ...

  8. react、less、antd-mobile 报错Inline JavaScript is not enabled. Is it set in your options?

    增加less-loader里面的配置.如图或者降级less到2.x版本

  9. vue使用--环境搭建与基本项目创建说明

    桃之夭夭,思绪纷飞. 一.环境搭建 1.安装node.js(包含包管理工具npm) 安装包可以到node官网进行下载,穿梭>>> 根据自己的操作系统下载相应版本的安装包,运行后按照操 ...

  10. 用 PHP 函数变量数组改变代码结构

    项目越做越大,代码越来越乱,维护困难.原因很多吧.起初为了实现功能,并没有注重代码的结构,外包公司嘛.虽然公司的项目负责人一直考虑复用.封装,但是我觉得基本上没有达到想要的效果.因为整个代码中没有用到 ...