css-loader
- loader:用于对模块的源代码进行转换
- 我们可以将css文件也看成一个模块,通过import来加载这个模块
- css-loader能帮我们解析css文件的代码
css-loader的安装
npm install css-loader -D
css-loader的使用方式
-
内联方式 使用!分割
import "css-loader!..css/style.css" -
配置方式
在webpack-config.js配置文件进行配置
module.rules的配置如下
-> rules属性对应的值是一个数组：[Rule]
-> 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性
test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式
use属性：对应的值时一个数组：[UseEntry]
UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
loader：必须有一个 loader属性，对应的值是一个字符串；
options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
注意:
- css-loader只负责解析css文件,此时文档中并没有被插入style标签,相关的css样式不能被展示出来.
- 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader
安装style-loader
npm i style-loader -D
注意:style-loader应该放在css-loader的前面,因为解析是从下往上解析,先解析css文件后,再插入到style标签中
less-loader的使用方式
如果我们想转换less文件为css文件,我们需要安装
npm i less-loader -D
//导出配置信息
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build")
},
module: {
rules: [{
test: /\.css$/,
// loader:"css-loader" 语法糖写法
//完整写法
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
]
}
}
PostCSS工具
- 工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
- 实现这些功能，我们需要借助于PostCSS对应的插件
npm install postcss postcss-cli -D
postcss-loader的使用
npm install postcss-loader -D
如果需要添加浏览器前缀,安装autoprefixer插件
npm install autoprefixer -D
postcss-preset-env插件更强大:
- 将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境 添加所需的polyfill
- 也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）
npm install postcss-preset-env -D
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
//require("autoprefixer")
require("postcss-preset-env")
]
}
}
}
单独抽离配置信息会使结构更清晰 本人是前端初学者一枚,如果有错误,希望各位指正,谢谢
