precss是一个预处理css的插件包，集成了很多postcss插件的功能，比如嵌套，变量，继承，混合，循环，判断。下面来介绍如何在webpack中使用precss。
一、新建项目
1、新建package.json
#自动生成package.json文件npm init
2、新建webpack.config.js
module.exports = { ?entry: "./main.js", ?output: { ???path: __dirname, // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 ???filename: "bundle.js" ?}, ?module: { ???rules: [ ?????{ ???????test: /\.css$/, ???????use: [ ?????????‘style-loader‘, ?????????{ loader: ‘css-loader‘, options: { importLoaders: 1 } }, ??????????????‘postcss-loader‘ ???????] ?????} ???] ?}, ?devtool: "inline-source-map"}3、新建postcss.config.js
module.exports = { ?plugins: [ ???require(‘precss‘), ???require(‘autoprefixer‘) ?]}4、新建index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>postcss的插件包precss</title></head><body> ???<div class="vars">变量</div> ???<div class="nested"> ?????<p>嵌套</p> ?????<strong>粗体加黑</strong> ???</div> ???<div class="mymixin">混合</div> ???<div class="extended2">继承</div> ???<div class="ani">引入，鼠标放上来</div> ???<div class="condition">条件</div> ???<script type="text/javascript" src="bundle.js"></script></body></html>
5、新建css/imported.css，css/style.css
/* imported.css */body { ?background: red;}.ani { ?width: 400px; ?height: 50px; ?background: yellow; ?transition: width 2s;}.ani:hover { ?width: 800px;}/* style.css */@import ‘./imported.css‘;*{ ?text-align:center; ?margin:0; ?padding:0;}$color: #CA1F2D;.vars{ ?line-height:30px; ?background:$color; ?color:white;}.nested{ ?background:#FFA500; ?padding: 8px 0; ?p{ ???margin-top:0; ???color:white; ?} ?strong{ ???font-weight:normal; ???&:after{ ?????content:‘这是粗体的after伪类‘; ?????margin-left: 15px; ?????color:grey; ???} ?}}%placeholder1{ ?background: #00BD00; ?line-height: 35px;}.extended1{ ?font-size: 15px; ?@extend %placeholder1;}@define-extend placeholder2{ ?background: #00BD00; ?line-height: 35px;}.extended2{ ?font-size: 18px; ?@extend placeholder2;}.placeholder3{ ?background: #00BD00; ?line-height: 35px;}.extended3{ ?font-size: 25px; ?@extend .placeholder3;}@define-mixin amixin $val:10px{ ?.mymixin{ ???color: yellow; ???padding: $val 0; ???@mixin-content; ?}}@mixin amixin{ ?background: #00BBFE;}@mixin amixin 15px{ ?font-weight: bold;}@define-mixin tcondition $val:5{ ?.condition{ ???background: #4169e1; ???@mixin-content; ???@if $val < 5{ ?????color: black; ???} @else { ?????color: white; ???} ?}}@mixin tcondition{ ?font-size: 12px;}@mixin tcondition 3{ ?font-size:15px;}.for-tab{ ?float: left; ?@for $i from 1 to 4 { ???.tab-$i { ??????margin-right:5px; ?????background:black; ?????width: $(i)px; ????} ?}}.for-menu{ ?@for $i from 1 to 5 by 2 { ???p:nth-of-type($i) { ??????margin-left: calc( 100% / $i ); ??????background:black; ???} ?}}.each{ ?$loveAnimal: dog, tiger, lien; ???@each $icon in $loveAnimal{ ???.icon-$(icon) { ?????/*background: url(‘icons/$(icon).png‘);*/ ?????background:#f00; ???} ?}}6、新建main.js
import ‘./css/style.css‘;
二、安装webpack的loader
cnpm i -D css-loader style-loader postcss-loader
三、安装postcss的插件
cnpm i -D precss autoprefixer
四、修改package.json文件
{ ?"name": "mypcs", ?"version": "1.0.0", ?"description": "this is my first postcss project", ?"main": "main.js", ?"scripts": { ???"start": "webpack-dev-server --open", ???"build": "webpack-dev-server", ???"result": "webpack" ?}, ?"repository": { ???"type": "git", ???"url": "mypcs" ?}, ?"keywords": [ ???"postcss" ?], ?"author": "camille", ?"license": "ISC", ?"devDependencies": { ???"autoprefixer": "^7.1.4", ???"css-loader": "^0.28.7", ???"postcss-loader": "^2.0.6", ???"precss": "^2.0.0", ???"style-loader": "^0.18.2" ?}}五、运行代码
npm run start
六、刷新视图页面看效果
七、总结
本篇文章介绍了如何在webpack中使用postcss的插件包precss，从新建项目到运行代码，思路比较清晰，下面主要总结我遇到的抓狂问题和解决方案，以及问题带给我的新思考，希望自己每解决一个问题，都能触类旁通，举一反三。讨厌问题，但是不拒绝问题，更不惧怕问题，因为方法总是有的，只要肯钻研。
1、问题描述
一开始我随意取了个文件夹名mypcs2，开发结束时，觉得自己的包名不太美妙，就重命名文件夹mypcs以及修改package.json文件中的name值。重新运行代码，竟然出现很多报错，说无法解析某个loader。真是郁闷！！！明明之前就安装了各种依赖的loader，瞧，文件夹里loader都在呢，为啥这会儿就不行了呢？代码呀什么的，我都没改呀，就修改了包名和package.json文件中的name值，有啥错？
2、问题分析
事实证明，大错特错！！！因为安装loader的时候，是明确在mypcs2包里进行的。现在要运行mypcs包，自然要在mypcs包里安装各种loader。
3、解决方案
把原来的node_modules文件夹删掉，然后重新安装loader。
4、深度思考
如果是插件，也会遇到上述问题，所以这里温馨提示，一开始确定好包名后，就不要再动了。不要修改包名，也不要复制一个旧包，在旧包上修修改改，做新项目。每做一个新包，都要按规矩办事，从头开始！切莫投机取巧，表面省事，结果给自己挖了个大坑，然后还不知道怎么爬出来，唉！奈何postcss的问题文档如此少，还很简陋。
另外，注意包名规则，比如postcss已经存在，就不要再用它了，选个别的名字，比如我的包名mypcs。
在webpack中使用postcss之插件包precss
原文地址：http://www.cnblogs.com/camille666/p/postcss_precss.html