使用webpack的postcss工具
postcss可以通过JavaScript转换样式再进行打包,比如添加浏览器前缀和css重置(可以将最新的css语法进行转化使所有浏览器适配)
一,配置webpack的相关内容
二,安装postcss
在终端输入安装:
npm install --save-dev postcss-loader postcss
三,使用postcss-loader
在配置文件webpack.config.js中使用loader
module: {
rules: [
{
test: /\.(less|css)$/i,
use: [
"style-loader",
"css-loader",
"less-loader",
"postcss-loader" //添加loader
],
},
]
}
四,安装postcss的相关插件和配置
终端安装:
npm install --save-dev postcss-preset-env
在根目录创建配置文件:postcss.config.js
在这个配置文件中导出一个对象如下:
module.exports = {
plugins: [
"postcss-preset-env",
]
};
最后在进行打包