1. home
  2. 前端

webpack使用postcss-loader

原创· kay· 06月05日· 
npm install --save-dev postcss-loader@4.1.0

自动为css添加浏览器私有前缀

npm install --save-dev autoprefixer@10.0.4

webpack.config.js

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
            'style-loader',
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
      ]
    }]
  }
};

postcss.config.js

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

可以创建一个.browserslistrc文件，也可以将配置写到package.json中

ie >= 8
Firefox >= 20
Safari >= 5
Android >= 4
Ios >= 6
Last 4 version
> 0% 表示要支持所有的浏览器

package.json

{
 "browserslist": [
    "ie >= 8",
    "Firefox >= 20",
    "Safari >= 5",
    "Android >= 4",
    "Ios >= 6",
    "Last 4 version"
  ],
}

删除重复的 CSS

npm install --save-dev postcss-delete-duplicate-css@1.0.0

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-delete-duplicate-css'),
	]
}

删除css中的注释

npm install --save-dev postcss-discard-comments@5.0.1

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-discard-comments'),
	]
}

样式合并

npm install --save-dev postcss-merge-rules@5.0.2

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-merge-rules'),
	]
}

demo

code {
  background: green;
}
code {
  font-size: 12px;
}

/* result */
code{
  background:green;
  font-size:12px;
}

移除不需要的css

npm i -D @fullhuman/postcss-purgecss@4.1.3

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
  plugins: [
    purgecss({
      content: ['./**/*.html']
    })
  ]
}

减少z-index值

npm install --save-dev postcss-zindex@5.0.1

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-zindex'),
	]
}

input

.box1 {
  z-index: 100;
}
.box2 {
  z-index: 101;
}

output

.box1{
  z-index:1;
}
.box2{
  z-index:2;
}

属性合并

npm install --save-dev postcss-merge-longhand@5.0.2

postcss.config.js

module.exports= {
  plugins: [
    require('postcss-merge-longhand'),
    ]
}

input

.btn {
  border-right: 1px solid red;
  border-left: 1px solid red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

output

.btn{
  border:1px solid red;
}

移除空值

npm install --save-dev postcss-discard-empty@5.0.1

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-discard-empty'),
	]
}

input

.btn{
	padding:20px;
}
@media screen and (min-width: 1200px){
}
.btn{}

output

.btn{ padding:20px; }

行内媒体查询

npm install --save-dev postcss@8.3.0 postcss-simple-vars@6.0.3 postcss-inline-media@1.4.0

postcss.config.js

module.exports= {
  plugins: [
    require('postcss-simple-vars'),
    require('postcss-inline-media')( {
    shorthand: 'min-width',
      shorthandUnit: 'px',
      shorthandValueAddition: -1
    } ),
  ]
}

input

.btn {
  padding: 20px @1200 10px @900 30px;
}

/* 可以与postcss-simple-vars搭配使用 */
$md: (max-width: 900px);
.btn {
  padding: 20px @1200 10px @md 30px;
}

output

.btn {
  padding: 20px
}

@media (min-width:1200px) {
  .btn {
    padding: 10px
  }
}

@media (min-width:900px) {
  .btn {
    padding: 30px
  }
}
@media (max-width:900px) {
  .btn {
      padding: 30px
    }
  }

媒体查询规则合二为一

使用 PostCSS 将相同的 CSS 媒体查询规则合二为一

npm install --save-dev autoprefixer-core@6.01 css-mqpacker@7.0.0

postcss-config.js

module.exports = {
  plugins: [
    require('css-mqpacker'),
  ]
}

input

body {
  @media (min-width:1200px) {
    color: pink;
  }
}

p {
  @media (min-width:1200px) {
    color: pink;
  }
}

output

@media (min-width: 1200px) {
  body,p {
    color: pink;
  }
}

排序媒体查询

npm install --save-dev postcss-sort-media-queries@3.10.11

postcss.config.js

module.exports= {
  plugins: [
  	require('postcss-sort-media-queries')( {
	    // sort: 'mobile-first' default value
	    sort: function(a, b) {
	      // custom sorting function
              return a.localeCompare(b);
	    }
	  }
  	),
  	require('autoprefixer'),
  ]
};

减少自定义标识符

npm install --save-dev postcss-reduce-idents@5.0.1

postcss-config.js

module.exports= {
  plugins: [
  require('postcss-reduce-idents'),
  ]
}

input

@keyframes whiteToBlack {
  0% {
    color: #fff
  }

  to {
    color: #000
  }
}

.one {
  animation-name: whiteToBlack
}

output

@keyframes a {
  0% {
    color: #fff
  }

  to {
    color: #000
  }
}

.one {
  animation-name: a
}

类似sass的@at-root

其实postcss-nested就自带了这个功能呢。

npm install --save-dev postcss-atroot

postcss.config.js

module.exports= {
  plugins: [
    require('postcss-atroot')(),
  ]
}

input

body {
	background: pink;
	@at-root {
		p {
			color:  green;
		}
	}
}

output

		p{
			color:green;
		}
body{
	background:pink
}

类似于sass嵌套规则

npm install --save-dev postcss-nested

postcss.config.js

module.exports= {
  plugins: [
    require('postcss-nested'),
  ]
}

input

 

output

webpack打包时分割css代码

webpack打包时分割css代码

使用webpack打包scss/sass

使用webpack打包scss/sass

评论
:broken_heart: :confounded: :flushed: :frowning: :grinning: :heart: :kissing_heart: :mask: :pensive: :rage: :relaxed: :scream: :smile: :smirk: :sob: :stuck_out_tongue_closed_eyes: :stuck_out_tongue_winking_eye: :wink:

    近期留言

      加载评论

    推荐阅读