Vite CSS Module 优雅的处理样式隔离

Vite插件：vite-plugin-oneof-css-module-强大而优雅的样式隔离
最新推荐文章于 2025-09-05 20:59:20 发布
原创 最新推荐文章于 2025-09-05 20:59:20 发布 · 1.8k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

本文介绍了作者开发的vite插件vite-plugin-oneof-css-module，专注于处理scss模块，特别强调其在不写`.module.scss`的情况下，支持根据不同文件夹或文件进行样式隔离，适用于微服务和大型项目中的样式管理。

今天介绍的是我写的一个vite插件vite-plugin-oneof-css-module，该插件主要处理scss module，那它适用于什么场景呢？

1. 最大的特点就是使用scss module 可以不用写 .module.scss 了

2. 可以根据不同的文件夹或文件分别进行不同的处理，比如 组件 .c-[local],模板.t-[local]等

3.在微服务中，做样式隔离

4. 在大型项目中做样式隔离

如何使用详情可参考我的文章 Vite5了用这个CSSModule 插件优雅进行样式隔离

优资园
关注
配置篇06|Vite 中的 CSS 支持与模块化详解
石小石Orz的博客
12-12 2413
webpack中，我们需要在项目中安装css-loader才能让webpack识别css文件。vue-cli基于webpack，内置了这个loaderVite天生就是支持对CSS文件的直接处理的。我们在项目根目录里创建好index.html、main.js、index.css然后安装viteindex.html中我们引入main.jsmain.js中我们引入index.css然后，index.css中我们加个全局背景使用vite启动项目，可以发现不用安装任何插件就可以识别.css文件。
工程化:vite4和vue3里面的css.module模块化的研究
峰会路转的博客
04-26 711
如何在vite里面写css的时候vite自动给我们加上这种hash,来进行样式的隔离，防止污染呢。
vite-plugin-css-modules:vitejs css modules 名称自动转化插件
05-05
@zebing/vite-plugin-css-modules @zebing/vite-plugin-css-modules 是一个vue css modules智能转化插件。让你在使用vue css modules的同时，无需通过:class="$style.cssname", class={styles.cssname}等繁琐的方式调用，而是直接 class="cssname", class="cssname"简单调用，极大的减小工作量，增加开发效率。 暂不支持 vue2.0。在ssr模式中，仅支持自定义classname方式，自定义classname与class共存可能会出错 如何使用? 安装 npm install @zebing/vite-plugin-css-modules --save-dev 使用 在vite.config.js 配置文件中加入配置 import vite
Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）
everfoot的博客
12-24 1207
Vite 提供了灵活的 CSS 模块化配置选项，可以帮助开发者在处理 CSS 时避免样式冲突，并根据项目的需求定制类名生成规则。同时，Vite 还支持对外部库（如）的样式进行处理，确保项目中的样式兼容性和可维护性。
vite CSS Modules
weixin_43901111的博客
03-17 361
CSS Modules 会自动生成唯一的类名，避免样式冲突。在使用 TypeScript 时，Vite 会为 CSS Modules 生成类型定义文件（*.module.scss.d.ts），提供更好的开发体验。container 是类名，输入styles.container 输出生成的类名 会自动生成唯一的类名。xxx.module.scss 或者 xxx.module.css。:export导出的变量，ts不会自动生成类型文件，需要自己手动定义。创建css或者scss文件。
vite中对css及css模块化的处理
m0_56772756的博客
06-18 3882
vite天生就支持对css文件的直接处理解决重复类名样式覆盖——预处理器（less，scss…） ：给我们提供了一些方便且非常实用的方法。
React 样式隔离核心方法和最佳实践
最新发布
人工智能全栈工程师 | 智能算法研发与实战落地​专注于人工智能算法研究、代码实现与工程落地，提供从模型设计到部署应用的全流程解决方案。
09-05 768
本课程系统讲解React样式隔离的多种方案，包括CSS Modules、CSS-in-JS和Shadow DOM技术。CSS Modules通过构建时生成唯一类名实现隔离，适合大多数项目；CSS-in-JS（如Emotion）直接在JS中编写样式，支持动态样式但有一定性能开销；Shadow DOM提供最强的原生隔离，适用于Web Components和微前端场景。课程涵盖各方案的原理、配置方法和实战代码，帮助开发者根据项目需求选择最佳样式隔离策略，解决全局污染和命名冲突问题，提升应用可维护性。
vite css配置项
03-08
对于希望采用模块化方式管理样式的项目来说，Vite 默认支持 `.module.css` 后缀名的文件自动按照 CSS Module 方式解析。只需创建相应命名模式下的文件即可享受其带来的作用域隔离特性。 #### 自定义 CSS 注入位置 ...
CSS Modules 让前端样式更具可维护性
小白菜的博客
07-05 388
本文旨在全面介绍CSS Modules技术，解释它如何解决传统CSS开发中的痛点，并提供详细的实施指南。我们将覆盖从基础概念到高级用法的全部内容。文章将从CSS Modules的基本概念开始，逐步深入到实现原理、配置方法和实际应用场景，最后探讨其未来发展趋势。：一种CSS文件编译方式，通过自动生成唯一类名实现样式隔离样式隔离：确保组件样式不会意外影响其他组件局部作用域：样式只在特定组件内有效CSS Modules通过自动生成唯一类名实现样式隔离它解决了传统CSS的全局污染问题。
qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用
高级前端工程师
10-29 6902
乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的
vue 之 css module的使用方法
12-01
前言 最近学习webpack看到了一个新鲜的东西，之前都是通过scoped来区别类名，秉着任何时候学习都不晚的心情，作为小白的我也想揭揭css module的神秘面纱。 css module目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题。相比于scoped为类名添加一个hash标识效果优秀不少，但相对的书写会繁琐一些。 项目基于cli3搭建，讲真的，我也是被cli3鬼迷心窍了。相比2的繁琐，3提供界面管理对我这样子的小白确实直观很多，而且需要配置vue.config.js也十分合适呢。 开工 动手之前先配置项目，网上很多文章说需要下载css-loader插件，Vue中的v
一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）
黄彪博客
06-17 8273
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
vite 更好的处理 css module的插件
zshsats博客
09-24 2795
一个react的项目，如果使用css module 则需要.module.xx ，这样很不美观，而且繁琐，如果能类似webpack中的oneOf那使用起来就方便灵活了，那如何实现呢？但是vite官方的配置是只能处理.module.xx的文件，这个对于我们全部使用css module 来说是有点不够用的了，那于是我便写了这个插件，来满足项目的需要。这个是vite处理css的插件，其实官方内置的是有的，如下代码所示，我们可以看到这个是使用postcss-modules插件来处理的，配置也是一样的。
Vite中的CSS工程化方案
郊眠寺
08-19 2788
通过对慢慢的深入了解，发现Vite的功能十分的强大，用起来也十分简便快捷，各种解决方案完全满足日常的开发痛点。) 以下是编译前和编译后的区别) PostCSS的插件还有很多，例如移动端单位转换px转换为rem，压缩。
【Vite】vite.config.js 中的 CSS 配置详解
lph159的博客
09-21 5972
在 Vite 项目中，CSS 的加载与处理是默认支持的。Vite 支持PostCSSSassLess等预处理器，并且自动将.css文件模块化处理。同时，你也可以通过配置来定制更复杂的需求，例如 CSS 的自动导入、样式变量的全局定义等。Vite 的 CSS 配置主要在文件中进行，具体的 CSS 配置项都放置在css对象中。Vite 使用esbuild作为默认的 CSS 压缩工具，你可以通过build: {你还可以通过配置css.minify来更细粒度地控制 CSS 的压缩行为。
react+vite配置module.scss(css in js)
FormAda的博客
08-09 3849
react+vite配置module.scss
vite4加react18加ts-样式隔离篇
u014708123的博客
01-02 839
vite4加react18加ts-安装篇；最近从vue3转型学习了，react相关技术架构，去有意识的去学习了相关东西，内容比较实用，没有引入太多原理和概念，就是最直接最实用的记录下来；
vite中处理css
m0_63446289的博客
06-15 937
vite中处理css 以及 vite配置文件中css配置流程 
vite中css模块化以及支持less等预编译
热门推荐
fighting_sunnyGirl的博客
08-16 1万+
配置vite.config.js文件，无需安装任何插件 -关于css的都在css模块下面进行配置 import path from 'path' export default defineConfig({ css:{ //* css模块化 modules: { // css模块化 文件以.module.[css|less|scss]结尾 generateScopedName: '[name]__[local]___[hash:base64:5]', hashPre..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值