微前端的样式隔离选择--CSS Modules

微前端的样式隔离选择--CSS Modules

前记

因为在实习公司发生了一件很"诡异"的事情:我的滑动条凭空消失了!!!很明显,这是因为被其他的样式所污染了,因为在公司的项目是用的EMP微前端框架,这个时候我开始对微前端框架的样式隔离方案产生了兴趣,例如qiankun有着自己的沙箱设计,但是我调研了很多使用这个框架的项目还是使用了CSS Modules,还有ESM,不提供css的样式隔离,在使用者的自定义中很多也会使用到这篇文章的主角,而在我实习公司的emp中使用的也是使用的CSS Modules.

说明: 并不是单单靠 CSS Modules 就能彻底实现样式隔离,个人感觉是一种如虎添翼的感觉,因为按需加载一直是个很不错的手段,会造成样式污染说到底是 F12 后看到的那些body被污染了,而把它直接卸载,再渲染别的也是可以实现的,这也是qiankun之前的沙箱实现方案.

CSS Modules 是什么

  • 权威的解释是:

CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you've used in the files to the globally-safe output CSS.

来自于这里

  • 我的理解是:

CSS Modules 的原理是通过在 构建过程 中,为每个CSS模块生成唯一的标识符,并将样式规则和类名映射到这个标识符上。这样在使用样式的地方,可以通过导入样式模块并使用到处的样式对象来引用样式类名。过程分为:解析、转换、映射、导出、应用

通过何种方式,CSS Modules实现了样式的模块化和局部作用域限定。每个样式类名都会被映射为一个唯一的标识符,在使用样式时,通过导入样式模块并使用导出的样式对象,可以引用样式类名。在构建工具会将引用的样式类名替代为对应的唯一标识符,从而实现样式的局部作用域限定和防止样式冲突。

没错,关键点在于:构建工具(普遍?)

如何实现CSS Modules

如何实现CSS Modules 这取决于我们所使用的构建工具,这里以webpack为例:

  • 安装相关依赖: 首先,需要安装Webpack及其相应的loader和插件。例如,可以安装css-loaderstyle-loader用于处理CSS文件,以及webpackwebpack-cli用于打包构建。
  • 配置Webpack: 在Webpack的配置文件中,需要添加相应的loader来处理CSS文件,并启用CSS Modules。例如,可以在module.rules中添加以下配置:
js 复制代码
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};

这里的css-loader会处理CSS文件,并启用CSS Modules。style-loader用于将CSS样式注入到页面中。

  • 编写样式文件: 在CSS文件中,可以使用:local关键字将样式类名导出。例如:
css 复制代码
.container {
  background-color: #f1f1f1;
  padding: 10px;
}

.title {
  color: blue;
}
  • 导入样式对象: 在需要使用样式的组件或模块中,可以导入样式文件,并使用导出的样式对象来引用样式类名。例如:
js 复制代码
import styles from './styles.module.css';

const element = document.createElement('div');
element.className = styles.container;

这里的styles对象是从样式文件中导入的样式对象,其中包含了以导出的样式类名为属性的对象。

通过以上步骤,webpack会在构建过程中解析CSS文件,并将样式规则和类名处理为唯一的标识符。在使用样式的地方,可以通过导入样式文件并导出的样式对象来引用样式类名。webpack会在打包过程中将引用的样式类名替换为对应的唯一标识符,从而实现CSS Modules的功能.

番外

其实在实现CSS Modules不只有构建工具:

  • 浏览器: 插件css-modulesify使您的 Browserify 能够构建requireCSS 文件并将其编译为 CSS 模块.
  • JSPM: 实验性 JSPM 加载器jspm-loader-css-modules为 SystemJS 和 JSPM 添加了 CSS 模块支持.
  • NodeJS: css -modules-require-hook 的工作方式与 Browserify 插件类似,但修补 NodeJSrequire以将 CSS 文件解释为 CSS 模块.

结语

今天努力过了,该去玩了

相关推荐
用户9272472502192 分钟前
新闻自动采集并通过API发布到博客
前端·后端
清风92006 分钟前
Logback——日志技术(基础)
java·前端·logback
EndingCoder6 分钟前
排序算法与前端交互优化
开发语言·前端·javascript·算法·排序算法·交互
晓13137 分钟前
JavaScript加强篇——第五章 DOM节点(加强)与BOM
java·开发语言·javascript
三月的一天31 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰31 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead36 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future14121 小时前
项目开发日记
前端·学习·c#·游戏开发
汪子熙1 小时前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315231 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫