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

最新推荐文章于 2024-01-29 18:12:25 发布
最新推荐文章于 2024-01-29 18:12:25 发布
阅读量1.3k 收藏 9
点赞数 10
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zshsats/article/details/134621910
版权

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

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

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

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

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

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

优资园
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
工程化:vite4和vue3里面的css.module模块化的研究
峰会路转的博客
04-26 424
如何在vite里面写css的时候vite自动给我们加上这种hash,来进行样式的隔离，防止污染呢。
Vite中的CSS工程化方案
郊眠寺
08-19 2537
通过对慢慢的深入了解，发现Vite的功能十分的强大，用起来也十分简便快捷，各种解决方案完全满足日常的开发痛点。) 以下是编译前和编译后的区别) PostCSS的插件还有很多，例如移动端单位转换px转换为rem，压缩。
Vue 中使用 CSS Modules优雅方法
08-27
主要介绍了Vue 中使用 CSS Modules优雅方法,本文文字结合实例代码的形式给大家介绍的非常详细，需要的朋友可以参考下
一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）
黄彪博客
06-17 4630
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
vite中如何更优雅的使用css
老司机的后备箱
01-16 2841
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
vite 更好的处理 css module的插件
zshsats博客
09-24 2465
一个react的项目，如果使用css module 则需要.module.xx ，这样很不美观，而且繁琐，如果能类似webpack中的oneOf那使用起来就方便灵活了，那如何实现呢？但是vite官方的配置是只能处理.module.xx的文件，这个对于我们全部使用css module 来说是有点不够用的了，那于是我便写了这个插件，来满足项目的需要。这个是vite处理css的插件，其实官方内置的是有的，如下代码所示，我们可以看到这个是使用postcss-modules插件来处理的，配置也是一样的。
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
tailwind-boilerplate:尾风CSS + Vite样板
03-12
设置基于tailwind css的项目需要安装tailwindcss npm软件包，postcss和autoprefixer-它还需要配置tailwind.config.js和postcss.config.js（可选，如果您打算使用postcss）然后手动配置这些文件。 最后，为了通过摇...
tailwindcss+vue3+vite+preline
最新发布
04-09
3. Tailwind CSS: 一种实用优先的CSS框架，它不包含预设样式，而是提供了一系列可配置的原子类，使得开发者能够通过组合这些类快速构建出一致、自定义的用户界面，减少编写重复CSS代码的工作量。
vite-ts-tailwind-starter:自以为是的Vite + Vue 3 + TypeScript + Tailwind CSS入门
05-01
Vite打字稿+尾风启动器 Vite的简单，自觉且可用于生产的项目模板。 有关最新更改，请参见 。 特征 Vue 3 Vuex 4商店（完全键入） 打字稿 带有JIT编译器的Tailwind CSS +已预安装以下插件 @tailwindcss/aspect-...
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
如何在react项目中使用css.modules
m0_60622481的博客
10-14 1510
如何在react项目中使用css.modules
【Vite】对 CSS 处理
Superman_H的博客
04-15 2017
Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件 Vite 解析 CSS 文件的过程： ① 使用 fs 模块读取 .css 文件的内容 ② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内 ③ 将 style 标签插入到 index.html 的 head 标签中 ④ 将该 .css 文件的内容替换为 Js 脚本，以便于 CSS 模块化 & 热更新 # CSS 模块化 (CSS Module) 在协同开发时，可能会出现
【Vue】Vue3.0样式隔离
Triumph_light的博客
01-29 736
在这里记录一下Vue3.0里面的样式隔离特性，在项目开发过程当中，有时候将样式单独提到了一个文件当中再引入到单组件文件当中，会导致没有样式隔离。这里阅读找到了解决办法。
vite中css模块化以及支持less等预编译
fighting_sunnyGirl的博客
08-16 9390
配置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 139
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初始化...
vite4加react18加ts-样式隔离篇
u014708123的博客
01-02 504
vite4加react18加ts-安装篇；最近从vue3转型学习了，react相关技术架构，去有意识的去学习了相关东西，内容比较实用，没有引入太多原理和概念，就是最直接最实用的记录下来；
react+vite配置module.scss(css in js)
FormAda的博客
08-09 2955
react+vite配置module.scss
vite实现css module
06-02
Vite 是一个非常快速的前端构建工具，它内置了对 CSS 的支持，包括 CSS 模块化。下面是在 Vite 中实现 CSS 模块化的步骤： 1. 安装依赖 首先，您需要安装 `sass` 和 `sass-loader` 依赖项，它们将帮助您在 Vite 中使用 CSS 模块化。 ``` npm install sass sass-loader --save-dev ``` 2. 配置 `vite.config.js` 在 `vite.config.js` 中，您需要配置 `css` 属性来启用 CSS 模块化和 `sass` 预处理器。例如： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], css: { modules: { localsConvention: 'camelCaseOnly' }, preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` } } } }) ``` 在上面的示例中，`css.modules` 属性启用了 CSS 模块化，并将类名转换为 CamelCase 格式。`preprocessorOptions.scss` 属性启用了 `sass` 预处理器，并将全局变量文件导入到所有样式文件中。 3. 创建样式文件 在您的样式文件中，您可以使用 `:local()` 选择器来定义局部样式。例如： ``` .container { padding: 10px; background-color: white; border-radius: 5px; :local(.title) { font-size: 18px; color: #333; } :local(.description) { font-size: 14px; color: #666; } } ``` 在上面的示例中，`:local()` 选择器定义了 `.title` 和 `.description` 类的局部样式。 4. 在组件中使用样式 在您的组件中，您可以像这样导入样式文件： ``` <template> <div class="container"> <h2 class="title">Title</h2> <p class="description">Description</p> </div> </template> <style module> @import "@/styles/your-styles.scss"; </style> ``` 在上面的示例中，`<style module>` 标签启用了 CSS 模块化，并导入了样式文件。然后，您可以像这样在组件中使用局部类名：`.title` 和 `.description`。 这就是在 Vite 中实现 CSS 模块化的基本步骤。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值