Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法

时间 2020-05-07

标签 webpack 实战简单 postcss 用法一些插件繁體版

原文原文链接

不知不觉地春节要来临了，今天已是放假的次日，想一想回老家以后全部的时间就不是本身的了，要陪孩子玩，走亲戚等等，我仍是趁着在郑州的这两天，把几天后春节要发布的文章给提早整整。在此，提早祝你们春节快乐！！javascript

前面我已写了6篇相关的Webpack方面的技术知识点，今天我主要分享有关PostCSS方面的技术,PostCSS严格来讲不是一款c s s预处理器，而是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它的工做模式是接收样式源代码并交由编译插件处理，最后输出CSS。经过PostCSS包含的不少功能强大的插件，可让咱们使用更新的CSS特性，保证更好的浏览器兼容性。css

PostCSS特色

支持将来的css, 使用cssnext书写将来的css
编译速度有了很大的提高
丰富的插件系统
c s s能够模块化

PostCSS在Webpack中的用法

使用npm 进行安装postcss-loader,postcss-loader是链接PostCSS和Webpack。安装命令行以下：html

npm install postcss-loader --save-dev

webpack.config.js配置以下：java

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: './dist'
          },
        }, 'css-loader'], // "css-loader" 将 CSS 转化成 CommonJS 模块
        exclude: /node_modules/
      },
      {
        test: /\.scss$/i,
        use: ['style-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        },
        'postcss-loader'  //配置postcss-loader
        ], 
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css'
  })],
}

postcss-loader能够结合css-loader使用，也可单独使用，就是单独使用也能够达到须要的效果，可是单独使用的时候不建议用css中的@import语法，不然会产生冗余代码。官方推荐是二者结合着使用，不要单独使用。node

postcss与Autoprefixer

postCSS必须有一个单独的配置文件，因此还须要在项目根目录下配置一个postcss.config.js，这个能够结合着自动添加前缀插件Autoprefixer使用，Autoprefixer 自动获取浏览器的流行度和可以支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。这是postCss最普遍的一个应用场景。首先安装Autoprefixer，安装命令代码以下：android

npm install autoprefixer  --save-dev

在postcss.config.js中添加autoprefixer,配置代码以下：webpack

const autoprefixer = require('autoprefixer')
module.exports = {
  parser: 'sugarss',
  plugins: {
    'autoprefixer': {
      flex: true,
      browsers: [
        '> 1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    }
  }
}

咱们能够在autoprefixer中添加须要支持的特性（如grid）以及兼容哪些浏览器（browsers）。配置好以后，咱们就可使用一些较新的CSS特性。如：web

.main{
dislay: grid;
}

因为配置中制定grid为true,也就是grid特性添加ie前缀，通过编译后变成：npm

.main{
display: -ms-grid;
dislay: grid;
}

postcss 与cssnext

postcss能够与cssnext 结合使用，这样能够在应用中使用最新的CSS的语法特性。首页使用npm 命令行安装：浏览器

npm install postcss-cssnext --save-dev

而后在posts.config.js中添加相应的配置，代码以下：

const postcssCssnext = require('postcss-cssnext')
module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcssCssnext': {

      browsers: [
        '> 1%',
        'last 2 versions'
      ]
    }
  }
}

指定好须要支持的浏览器以后，咱们就能够顺畅地使用CSSNext的特性了。PostCSS会帮咱们把CSSNext的语法翻译为浏览器能接受的属性和形式。好比下面的代码：

/** main.css **/
:root {
	--highligtColor: hwb(190, 35%, 20%);
}
body {
	color: var(--highlightColor)
}

打包后编译的效果以下：

body {
	color: rgb(89, 185, 204)
}

postcss 与stylelint

stylelint是一个css代码质量检测的工具，咱们能够为其添加各类规则，来统一项目的代码风格，来确保代码质量高。首页先用命令行安装stylelint代码以下：

npm install stylelint --save-dev

postcss.config.js配置代码以下：

const stylelint = require('stylelint')
module.exports = {
  plugins: {
    'stylelint': {
      config: {
        rules: {
          'declaration-no-important': true
        }
      }
    }
  }
}

这里咱们添加了declaration-no-important这样一条规则，当咱们的代码中出现了“！important”时就会给出警告。好比下面的代码：

/** a.scss**/
$base-color: red;

html {
  body{
    color: $base-color !important;
  }
}

打包效果以下图：能够看出给出警告。 使用stylelint能够检测出代码中的样式问题（语法错误、重复的属性等），帮助咱们写出更加安全而且风格更加一致的代码。

CSS Modules

CSS Modules 模块化是css的全局的终结者，就是说你永远不用担忧命名太大众化而形成冲突，只要用最有意义的名字就好了。 css 模块化是近几年比较流行的一种开发模式，让css跟其余开发语言同样，具备本身的模块做用域，让css也拥有模块化的特色：

每一个CSS文件中的样式都拥有单独的做用域，不会和外界发生命名冲突。
对CSS进行依赖管理，能够经过相对路径引入CSS文件。
能够经过composes轻松复用其余CSS模块。

使用CSS Modules 不须要额外安装其余组件，只须要配置css-loader便可。配置web pack.config.js配置以下：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  }
}

咱们只须要配置modules.localIdentName配置便可

[name]指代的是模块名，这里被替换为style。
[local]指代的是本来的选择器标识符，这里被替换为title。
[hash：base64：5]指代的是一个5位的hash值，这个hash值是根据模块名和标识符计算的，所以不一样模块中相同的标识符也不会形成样式冲突。 cs s代码以下：

/** style.css**/
.tit {
  color: #ff0000;
}

// index.js
import style from  './style.css';
document.write(`<p class="${style.tit}">hello webpack2</p>`);

编译后发现代码成了一个class为.style__tit--Vp6X7，之前我在j s中引入c s s文件，直接import引入便可，不须要定义一个名称，可是这个c s s modules 引入c s s的时候须要定义一个对象，而后再引用，最终这个HTML中的class才能与咱们编译后的CSS类名匹配上。运行效果如图：

总结：

今天与你们分享的主要是postcss相关的，主要包括到postcss与webpack结合使用，autoprefixer自动添加前缀，stylelint检测代码，css modules等等。这只是我的观点，若是有不足，还请多指教。若是想了解更多，请扫描下面的二维码：