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:;
  padding:;
}
$color: #CA1F2D;
.vars{
  line-height:30px;
  background:$color;
  color:white;
}
.nested{
  background:#FFA500;
  padding: 8px 0;
  p{
    margin-top:;
    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的更多相关文章

  1. 在webpack中使用postcss之插件cssnext

    学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...

  2. webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)

    vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...

  3. 深入浅出的webpack构建工具---PostCss(五)

    一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...

  4. PHPCMS v9插件包整合

    插件包是已经修改好的文件集合,您可以直接将插件包复制到您的网站中. 注意:插件包会替换phpcms中的文件,如果您修改过phpcms中的文件请先备份好旧的文件. 1.下载插件包 2.解压 3.复制里面 ...

  5. webpack中打包拷贝静态文件CopyWebpackPlugin插件

    copyWebpackPlugin: 作用:用于webpack打包时拷贝文件的插件包 安装:npm install copyWebpackPlugin@版本号 使用:// copy custom st ...

  6. webpack 中常用安装插件的一些命令

    1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loader style-loader  ...

  7. webpack中clean-webpack-plugin插件使用遇到的问题及解决方法

    webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的. 通常,在每次构建前清理 /dist 文件夹,是比较推荐的做法,因 ...

  8. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  9. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

随机推荐

  1. jdk8系列三、jdk8之stream原理及流创建、排序、转换等处理

    一.为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX ...

  2. 常用的4个eclipse插件安装过程及使用方法

    最近整合了4个常用eclipse插件安装过程,分别是PMD.checkstyle.findbugs.sourcemonitor插件.因为我这里没有外网,所以所有的插件不是最新版,建议有网的童鞋自行在外 ...

  3. 转载：《理解RESTful架构》 阮一峰

    原文:http://www.ruanyifeng.com/blog/2011/09/restful.html 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件&q ...

  4. Linux内核移植

    实验步骤:(1)准备工作(2)修改顶层Makefile(3)修改falsh 分区(4)配置编译内核 下面以Linux2.6.30.4内核移植到gec2440为例: 一.准备工作:建立工作目录,下载内核 ...

  5. bootgrid 刷新保持当前排序

    1. 前言 主要是利用了HTHNL5的localStorage技术和用ajax传输一个数组到后台并进行判断.这篇文章是解决一个小需求而来的,主要是用来记录. 2. 代码 JavaScript: var ...

  6. 100以内的质数（for和if）

  7. jvm字节占用空间分析

    一个对象实例占用了多少字节,消耗了多少内存?这样的问题在c或c++里使用sizeof()方法就可以得到明确答案,在java里好像没有这样的方法(java一样可以实现),不过通过jmap工具倒是可以查看 ...

  8. Linux权限命令

    Linux 基础——权限管理命令chmod   一.Linux中的文件权限与目录权限 Linux中定义了3种访问权限,分别是r.w.x.其中r表示对象是可读的,w表示对象是可写的,x表示对象是可执行的 ...

  9. git代码提交步骤，教程

    代码提交 代码提交一般有五个步骤: 1.查看目前代码的修改状态 2.查看代码修改内容 3.暂存需要提交的文件 4.提交已暂存的文件 5.同步到服务器 1.     查看目前代码的修改状态 提交代码之前 ...

  10. Android动态设置纯色图标的颜色

    https://blog.csdn.net/qq_20082961/article/details/73718363 以前做了一个流量悬浮窗,悬浮窗里有当前网络状态的图标和网速的文字,想实现改变文字颜 ...