4 编写和打包CSS文件
css-loader的使用
Loader 可以用于对 模块的源代码 进行转换
我们可以将css文件也看成一个模块,我们通过import来加载这个模块
在加载这个模块时 webpack其实并不知道如何对其进行加载,必须要指定对应的loader来完成这个功能
我们需要一个什么样的loader?
对于加载css文件来说 我们需要一个可以读取css文件的loader
这个loader最常用的是css-loader
CSS-loader的安装
JavaScript npm install css-loader -D
CSS -loader 的使用方案
如何使用loader来加载css文件呢? 有三种方式:
1 内联方式:
在引入的样式前加上使用的loader,并使用!分割
JavaScript import "css-loader!../css/style.css"
2 CLI方式(webpack5中不再使用)
已淘汰..
3 配置方式
loader配置方式
我们的webpack.config.js文件中写明配置信息:
module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载)
这种方式可以更好的表示loader的配置 也方便后期的维护 同时也让你对各个loader有一个全局的概览
module.rules的配置如下:
rules属性对应的值是一个数组[Rule]
数组中存放的是一个个Rule,Rule是一个对象,对象中可以设置多个属性
test属性:用于对resource(资源)进行匹配,通常会设置正则表达式
use属性:对应的值是一个数组:[UseEntry]
UseEntry是一个对象 可以通过对象的属性来设置一些其他的属性
loader:必须有一个loader属性,对应的值是一个字符串
options:可选属性 值是一个字符串或对象,值会被传入loader中
query:目前已经使用options来替代;
传递字符串(如:use:['style-loader'])是loader属性的简写方式:(如:use[{loader:'style-loader'}])
loader属性:Rule.use:[{loader}]的简写
认识style-loader
可以通过css-loader来加载css文件了
但是发现 这个css在我们的代码中没有生效(页面没效果)
为什么呢?
因为css-loader只负责将.css文件进行解析,并不会将解析之后的css插入到页面中
如果我们希望再完成 插入 style的操作,我们还需要另外一个loader 就是 style-loader
安装 style-loader
JavaScript npm install style-loader -D
配置style=loader
在配置文件中 添加 style-loader
注:因为loader的执行顺序是从右向左(或者说 从下到上,从后到前)所以我们需要将style-loader写到css-loader的前面
JavaScript use:[ // 注 style-loader写到css-loader的前面 {loader:"style-loader"} {loader:"css-loader"} ]
5 编写和打包LESS文件
如何处理less文件?
在开发中 可能会使用less sass styus的预处理器 来编写css样式 效率更高
那么 如何让我们的环境支持这些预处理器?
首先我们需要确定less sass 等编写的css需要通过工具转换成普通css
如 下面编写的less样式:
CSS @fontSize: 50px; @fontColor:blue; .title { font-size: @fontSize; color: @fontColor; }
可以使用less-loader来处理
先使用less工具转换到css 再用style
JavaScript npm install less-loader -D
JavaScript { test:/\.less$/, use:["style-loader","css-loader","less-loader"] }
6 postcss工具处理CSS
认识PostCSS工具
什么是PostCSS呢?
他是一个通过Js来转换样式的工具
可以帮助我们进行一些CSS的转换和适配 如 自动添加浏览器前缀,css样式的重置
实现这些功能 需要借助于PostCSS对应的插件
如何使用PostCSS呢? 分为两步:
一:查找PostCSS在构建工具中的拓展,如webpack和postcss-loader;
二:选择可以添加你需要的PostCSS相关的插件
Postcss-loader
可以借助于构建工具:
在webpack中使用postcss就是使用postcss-loader来处理
我们来安装postcss-loader:
JavaScript npm install postcss-loader -D
我们修改加载css的loader:(配置文件过多,给出一部分了)
注:因为postcss需要有对应的插件才会起效果.所以我们需要配置它的plugin
JavaScript { loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ require('abtoprefixer') ] } } }
单独的postcss配置文件
因为我们需要添加前缀,所以要安装autoprefixer;
我们可以将这些配置信息放到一个单独的文件中进行管理
在根目录下创建postcss.config.js
JavaScript module.exports = { plugins:[ // require("autoprefixer") "autoprefixer" ], }
postcss-preset-env
preset => 预设
事实上,在配置postcss-loader时 我们配置插件并不需要使用autpprefixer
我们可以使用另外一个插件:postcss-preset-env
postcss-preset-env也是一个postcss的插件
它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS 且会根据目标浏览器或者运行时环境添加所需的polyfill
也包括会自动帮助我们添加autoprefixer(相当于已经内置了autoprefixer)
首先 我们需要安装它
JavaScript npm install postcss-preset-env -D
之后 我们直接修改之前的autoorefixer即可:
JavaScript plugins:[ "postcss-preset-env" ],
