引入CSS#
看完本节你将了解:
- 两种方式让webpack替我们导入css文件
参考链接: https://www.npmjs.com/package/css-loader
- 第一种方式:
安装loader插件命令
npm i style-loader -D npm install --save-dev css-loader
参考配置文件 : 通过一个rules来控制这个过程, 通过正则匹配到css, 然后对这些匹配到的文件使用 style-loader css-loader , 执行的顺序的 后面的css-loader比style-loader先执行
module.exports = { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, };
通过如下方式将css引入
此时再执行 npm run build 可以完成构建工作
问题来了, 通过这种方式导入进来的css文件在哪里呢?
通过查看html源码可见, 构建出来的源码被放在head标签中
- 第二种引入css文件的方式, 将css导入进来, 并提取成一个独立的文件, 并自动插入到html中
参考链接: https://www.npmjs.com/package/mini-css-extract-plugin
安装命令:
npm install --save-dev mini-css-extract-plugin
参考webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { // 在plugins部分new出来 plugins: [ new MiniCssExtractPlugin( { filename: '[name].[chunkHash:8].css' } )], module: { rules: [ { test: /\.css$/i, use: [ { loader: MiniCssExtractPlugin.loader, options: { esModule: true, }, }, 'css-loader', ], }, ], }, };
这种方式生成结果如下:
很明显: css被添加在head标签中, script添加在index.html末尾
小技巧, 如果想让生成的文件呈现下面的样子:
可以在webpack.config.js文件中, 使用下面的方式为文件命名
new MiniCssExtractPlugin( { filename: 'css/[name].[chunkHash:8].css' } )
CSS预处理#
参考链接: https://www.npmjs.com/package/less-loader
目的是处理less, 将less转换成css
安装 less 和 less-loader
npm install less less-loader --save-dev
在webpack.config.js中添加less的解析规则
loader的第二种写法
{ test: /\.less$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', // 'less-loader', { loader: "less-loader", options:{ } } ], }
自动添加CSS前缀#
看完本节你将了解
- 啥是css3前缀
- 为啥要加前缀
- 怎么通过webpack添加前缀
**那为啥要添加前缀呢? **
因为在CSS标准未被确定之前, 市面上的不同浏览器使用自己私有的前缀却分不同的CSS样式, 当标准确定之后, 各大浏览器不再使用这些前缀, 目前很多私有的前缀都可以不再写了, 但是为了兼容, 可以仍然使用前缀逐渐过度
常见的浏览器的前缀如:
- Chrome谷歌浏览器: -webkit-
- Safari苹果浏览器: -webkit-
- FireFox 火狐: -moz-
- IE: -ms-
- Opera 欧朋浏览器: -O-
例:
#example{ -webkit-outline: none; -moz-outline: none; -ms-outline: none; -o-outline: none; -khtml-outline: none; outline: none; }
如何配置webpack, 自动添加浏览器css3前缀
参考链接: https://www.npmjs.com/package/autoprefixer
安装命令:
npm i postcss-loader autoprefixer -D
第二步: 在项目的根目录下创建 postcss.config.js 配置文件
postcss的npm包参考链接: https://www.npmjs.com/package/postcss
module.exports = { plugins: [ // 他需要下面的插件 autoprefixer require('autoprefixer'), ] }
第三步: 在webpack.config.js配置文件中添加指定的postcss-loader, 注意把他的添加顺序, 放在靠前的位置
第四步: 在package.json配置文件中添加 browerslist相关配置, 可以针对不同浏览器做出更详细的配置
参考链接: https://www.npmjs.com/package/browserslist
实例:
"browserslist": [ "defaults", "not IE 11", "not IE_Mob 11", "maintained node versions", ]
并不是浏览器包含的越多越好, 比如说想用ES5的话, IE的版本至少要大于等于8
