重要性

手工维护CSS成本过高，需要更智能的方式来解决兼容性问题，更优雅地处理组件间的样式隔离，以及增强语言特性。

提取CSS

MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
本插件基于 webpack v5 的新特性构建，并且需要 webpack 5 才能正常工作。
与 extract-text-webpack-plugin 相比：

  • 异步加载
  • 没有重复的编译（性能）
  • 更容易使用
  • 特别针对 CSS 开发

样式预处理

  • style-loader
  • css-loader
  • sass-loader
  • less-loader

PostCSS

严格来说，PostCSS并不能算是一个CSS的预编译器，它只是一个编译插件的容器。它的工作模式是接收样式源代码并交由编译插件处理，最后输出CSS。开发者可以自己指定使用哪些插件来实现特定的功能。

  1. npm install postcss-loader

postcss需要新建一个配置文件——postcss.config.js
常配合使用的插件：

  • autoprefixer：自动前缀，自动添加厂商前缀，兼容浏览器
  • stylelint：CSS质量检测工具，为代码添加规则，来统一项目风格，确保代码质量
  • postcss-cssnext：可以在应用中使用最新的CSS语法特性

CSS Module

把CSS模块化，让CSS也拥有模块的特点：

  • 每个CSS文件中的样式都拥有单独的作用域，不会和外界发生命名冲突
  • 对CSS进行依赖管理，可以通过相对路径引入CSS文件
  • 可以通过composes轻松复用其他模块

使用CSS Modules不需要额外安装模块，只要开启css-loader中的modules配置项即可。

问题：如何在HTML文件中引入css，类名等如何隔离，如何对HTML标签添加类名等选择器？