工程化:vite4和vue3里面的css.module模块化的研究

已于 2024-06-07 16:41:20 修改
阅读量542 收藏
点赞数
分类专栏： 移动端vant组件的深入研究 前端框架深度研究-vben 文章标签： css 前端 javascript
于 2023-04-26 17:42:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/130391044
版权
本文探讨了在Vite4和Vue3环境下如何实现CSS模块化，通过vite.config配置来自动添加hash以防止样式污染。详细介绍了外部module.less的多种写法，包括嵌套和继承，并展示了组件内部的CSS使用方式。建议查阅官方文档以获取更多详细信息。
摘要由CSDN通过智能技术生成

如何在vite里面写css的时候vite自动给我们加上这种hash,来进行样式的隔离，防止污染呢

页面效果

在这里插入图片描述

vite.config配置

css: {
   
      // css预处理器
      preprocessorOptions: {
   
        less: {
   </
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
专栏目录
订阅专栏
webpack&vite 前端构建工具源码
05-04
1. **模块化**：Webpack 支持CommonJS、ES6模块语法，可以处理任何类型模块间的依赖关系。 2. **加载器（Loader）**：转换模块，如Babel用于将ES6+代码转化为浏览器可识别的ES5。 3. **插件（Plugin）**：扩展...
vite中对css及css模块化的处理
最新发布
m0_56772756的博客
06-18 1955
vite天生就支持对css文件的直接处理解决重复类名样式覆盖——预处理器（less，scss…） ：给我们提供了一些方便且非常实用的方法。
一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）
黄彪博客
06-17 6151
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
vite 更好的处理 css module的插件
zshsats博客
09-24 2564
一个react的项目，如果使用css module 则需要.module.xx ，这样很不美观，而且繁琐，如果能类似webpack中的oneOf那使用起来就方便灵活了，那如何实现呢？但是vite官方的配置是只能处理.module.xx的文件，这个对于我们全部使用css module 来说是有点不够用的了，那于是我便写了这个插件，来满足项目的需要。这个是vite处理css的插件，其实官方内置的是有的，如下代码所示，我们可以看到这个是使用postcss-modules插件来处理的，配置也是一样的。
Vite中的CSS工程化方案
郊眠寺
08-19 2595
通过对慢慢的深入了解，发现Vite的功能十分的强大，用起来也十分简便快捷，各种解决方案完全满足日常的开发痛点。) 以下是编译前和编译后的区别) PostCSS的插件还有很多，例如移动端单位转换px转换为rem，压缩。
vite中如何更优雅的使用css
老司机的后备箱
01-16 2945
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vite CSS Module 优雅的处理样式隔离
zshsats博客
11-25 1489
今天介绍的是我写的一个vite插件vite-plugin-oneof-css-module，该插件主要处理scss module，那它适用于什么场景呢？2. 可以根据不同的文件夹或文件分别进行不同的处理，比如 组件 .c-[local],模板.t-[local]等。1. 最大的特点就是使用scss module 可以不用写 .module.scss 了。4. 在大型项目中做样式隔离。如何使用详情可参考我的文章。3.在微服务中，做样式隔离。
WM_01_邂逅webpack1
08-04
3. **模块化（Module）**：Webpack 提供了强大的模块化支持，可以处理各种类型的模块，使开发者能够按照模块化的方式组织代码，提高代码的复用性和可维护性。 4. **现代特性（Modern）**：Webpack 配合ES6+、...
vue3+vite+ts项目使用css modules
温壁
12-30 2994
安装插件插件地址 npm install -D typescript-plugin-css-modules yarn add -D typescript-plugin-css-modules 配置插件，tsconfig.json文件中 { "compilerOptions": { ... "plugins": [{"name": "typescript-plugin-css-modules"}] } ... } 配置vscode软件的settings.json 文件-&g
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】对 CSS 处理
Superman_H的博客
04-15 2372
Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件 Vite 解析 CSS 文件的过程： ① 使用 fs 模块读取 .css 文件的内容 ② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内 ③ 将 style 标签插入到 index.html 的 head 标签中 ④ 将该 .css 文件的内容替换为 Js 脚本，以便于 CSS 模块化 & 热更新 # CSS 模块化 (CSS Module) 在协同开发时，可能会出现
vite中css模块化以及支持less等预编译
fighting_sunnyGirl的博客
08-16 9912
配置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..
【Vite】2.0 Vite构建Vue3项目，CSS使用
我睡醒刚刚
12-12 165
vite创建项目，Win+R，cmd： image.png 输入vite-vue3 image.png 这里我们选择vue image.png 教程建议选择vue，后面会切换成vue-ts，这里我们偏不，就选vue-ts： image.png 这样，我们项目创建完成。 通过vscode打开： image.png image.png vite初始化...
Vite学习 --- CSS相关
cp3_hxl的博客
05-10 845
我们写的css代码（怎么爽怎么来）—> postcss —> 【去将语法进行编译(嵌套语法，函数，变量)成原生css】less sass 等预处理器都可以做 —> 再次对未来的高级css语法进行降级 —> 前缀补全 —> 浏览器客户端.我们写的js代码(怎么爽怎么来) --> babel --> 将最新的ts语法进行转换js语法 --> 做一次语法降级 --> 浏览器客户端去执行.在vite.config.js 中我们通过css属性去控制整个vite对于css的处理行为.less是可以定义变量的.
vite的基本使用（Mhua）
zmh_984983444的博客
08-17 2661
vite在客户端的环境变量校验前缀默认值是 VITE_，所以我们设置的环境变量只有以 VITE_ 开头的，调用 import.meta.env 才能获取到相关变量。vite内置 dotenv库， 利用 dotenv 库可读取 .env .env.development .env.production配置文件中的环境变量。注意：在开发环境中，.env文件和.env.development中存在同名变量时，后者文件会覆盖前者文件中的变量。1、vite在读取到main.js中引用到index.css文件。...
vite使用css的各种功能
weixin_45441173的博客
01-06 1685
vite使用css的各种功能
vite相关配置
屈小康
06-05 465
如果你安装的库是用来打包的、解析代码的，比如webpack、babel，就可以用 -d 来安装，项目上线了，这些库就没用了，不然留这些库给用户自己来打包和解析代码嘛。1、保证css在执行运行起来万无一失，，去将语法糖进行编译（嵌套语法，函数，变量）变成原生的css，在次对未来的高级语法css进行降级，前缀补全，输送到浏览器。说白了你安装一个库如果是用来构建你的项目的，比如echarts、element-ui，是实际在项目中起作用，就可以使用 -s 来安装。以viteVue为例。
Vue中CSS模块化最佳实践
02-14 299
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的，否则组件之间可能相互影响，造成难以调试。 在Vue Loader Scope CSS和Vue Loader CSS Modules两节中介绍了Vue实现CSS模块化的两种方式。 下面对scoped和CSS Modules两种方式分别进行介绍，然而这两种方式均非最佳实践。 一、scoped 使用scoped会为组件中HTML...
21:29:16.574 [plugin:vite:vue] Invalid end tag.
03-31
However, this error message typically occurs when there is an invalid end tag in a Vue component file, which can cause issues with the Vite plugin. To resolve this error, you can try checking your ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值