扩展功能 - postcss与css模块 - 《webpack学习》

postcss 是一个用javascript 工具和插件转换css 代码的工具。比如我们可以使用Autoprefixer 插件来自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮我们自动的为css 规则添加前缀，将最新的css 语法转换成大多数浏览器都能理解的语法。

css 模块能让我们永远不用担心命名太大众化而造成冲突

postcss 与webpack 结合使用，需要安装style-loader、 css-loader、 postcss-loader 三个loader

Autoprefixer 插件
比如有时候我们的部分浏览器不支持css3的display: flex 属性，那么我们就需要在此属性前添加对应的前缀来兼容。这个时候我们就可以使用Autoprefixer 插件配合postcss来完成。

安装Autoprefixer 插件

npm install autoprefixer -D

创建 postcss.config.js 文件

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

同时在webpack.config.js 配置相关loader

// webpack.config.js
module.exports = {
  module: {
    rules:[
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

我们还需要在 package.json 约定浏览器版本

// package.json
{
  "browserslist": [
    "> 1%", // 支持的浏览器为全球使用率在1%以上的浏览器
    "last 2 version" // 浏览器版本为最新的2个版本
  ]
}

最终效果显示

css 模块

启用css 模块

// webpack.config.js
module.exports = {
  module: {
    rules:[
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }, 
          'postcss-loader'
        ]
      }
    ]
  }
}

同时在引入css文件的地方，引入的是一个模块

// index.css
body {
    background-color: green;
    display: flex;
}
body .box {
    height: 100px;
    width: 100px;
    background-color: red;
}

// index.js
// 以往引入的方式为
// import './index.css'
import style from './index.css'
const div = document.createElement('div')
// div.classList.add('box')
div.classList.add(style.box)
document.body.appendChild(div)

最终效果展示

对于css 模块，我们还可以部分开启 css 模块模式，比如全局样式我们可以冠以 .global 前缀，如：
.global.css 我们使用普通模式
.css 其它的css我们使用css 模块模式

// webpack.config.js
module.exports = {
  module: {
    rules:[
      // 匹配启用css模块模式的文件
      {
        test: new RegExp(`^(?!.*\\.global).*\\.css`),
        exclude: [path.resolve(__dirname, '..', 'node_modules')],
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }, 
          'postcss-loader'
        ]
      },
      // 匹配普通模式的文件
      {
        test: new RegExp(`^(.*\\.global).*\\.css`),
        exclude: [path.resolve(__dirname, '..', 'node_modules')],
        use: [
          'style-loader', 
          'css-loader', 
          'postcss-loader'
        ]
      }
    ]
  }
}