webpack基础(八)—

一、什么是PostCss
PostCss就是通过js代码来第css进行转换，比如给css加上浏览器前缀。当然这些工作也是需要一些插件来一起完成的。
二、在命令行执行postcss

1、首先安装postcss postcss-cli，
npm install postcss postcss-cli -D2、安装所需要的依赖（autoprefixer是填充浏览器前缀的）
npm install autoprefixer -D3、执行命令
npx postcss --use autoprefixer -o end.css test.css

三、在开发环境中使用postcss
我们不能一直在命令行环境中使用postcss,我们也可以在webpack中使用postcss，此时需要安装postcss-loader,postcss-loader是依赖于postcss的。npm install postcss-loader -D

在webpack.config.js中配置
{test:/\.css$/,use:{loader:"postcss-loader",options:{postcssOptions:{plugins:[require("autoprefixer")]}},}}

也可以在外部的postcss.config.js的文件中进行配置。

module.exports = {plugins:[require("autoprefixer")]
}

postcss-preset-env也是postcss的一个插件，类似于babel的预设。postcss-preset-env中存在着一些插件、帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境
添加所需的polyfill，同时也可以自动帮助我们添加autoprefixer

module.exports = {plugins:[require("postcss-preset-env")]
}

webpack基础(八)——PostCss相关推荐

webpack - 基础配置教程
目录什么是webpack? 简要介绍 webpack中的模块打包(bundle)的概念 webpack的工作 webpack如何分析模块依赖关系 webpack五大核心概念 entry outpu ...
webpack基础教程
webpack基础教程一 webpack五大核心二 webpack处理css资源三 webpack处理less.scss.sass.styl资源四 webpack-module的详细配置五 ...
css3制作八棱锥_CSS基础八部分-第二部分
emmet语法 1.简介 Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法. 2.快速生成HTML结构语法生成标签直接输入 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练
一.用gulp 构建前端页面(1)---静态构建 npm install gulp-template --save-dev 通过这个插件,我们可以像写后台模板(譬如PHP)一样写前端页面.我们首先学习 ...
C++学习基础八——重载输入和输出操作符
C++学习基础八--重载输入和输出操作符一.重载输入操作符的要点: 1.返回值为istream &. 2.第一个参数为istream &in. 3.第二个参数为自定义类型的引用对象( ...
webpack基础webpack-dev-server配置
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server 一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根 ...
深入浅出的webpack构建工具---PostCss(五)
一:PostCss是什么? PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

webpack基础(八)——PostCss

webpack基础(八)——PostCss相关推荐

最新文章

热门文章