在上一篇文章 中,完成 webpack 的基础配置就可以完成 es6 的编译,本篇文章介绍如何使用 webpack 完成 PostCSS 的编译。
想要了解 PostCSS 常用插件与语法介绍,点击这里查看。
版本说明
本文使用的 webpack 的版本为: 4.30.0
开始配置
组件安装
首先使用命令行完成 css loader 的安装:
$ cnpm install --save-dev style-loader css-loader
然后安装 postcss-loader :
$ cnpm install postcss-loader --save-dev
安装 PostCSS 最常用的组件 precss:
$ cnpm install precss --save-dev
创建 CSS 文件
在 ./src/css
文件夹下创建 style.css
文件:
webpack-es6
|- /dist
|- index.html
|- /src
|- index.js
|- css
|- style.css
webpack 配置 css 处理规则
在 webpack.config.js
文件添加 CSS
的处理规则:
const path = require('path');
module.exports = {
entry: './src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
// 以下代码为新添加的代码
module:{
rules:[
{
test: /\.css$/, // 匹配所有以 .css 结尾的文件,然后通过以下的 loader 进行处理
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
}
// 以上代码为新添加的代码
};
配置 PostCSS
项目目录下新建 postcss.config.js
文件,在配置文件中引入我们安装的 precss
插件:
module.exports = {
plugins:[
require('precss')
]
}
配置完成
以上就完成了 webpack 打包 PostCSS 的配置,此时的文件目录如下:
webpack-postcss
|- node_modules
|- /dist
|- index.html
|- /src
|- css
|- style.css
|- index.js
|- package.json
|- package-lock.json
|- postcss.config.js
|- webpack.config.js
添加代码
接下来我们添加代码测试配置是否成功。
文件 ./dist/index.html
添加代码:
PostCSS编译成功
文件 ./src/css/style.css
添加代码:
$color_index: 1; // precss 的变量定义语法
P{
color: red;
span{
@if $color_index == 1{ // precss 的判断语法
color: blue;
}@else{
color: green;
}
}
}
文件 ./src/index.js
添加代码:
import './css/style.css'; // 将 css 引入到 webpack 的入口 js 文件
编译程序
运行命令行
$ npm run build
打开 index.html
,如果页面中 PostCSS
文字的颜色为蓝色,则说明 PostCSS 编译完成。页面效果如下图: