CSS Modules在框架中的使用

CSS Modules 是一种与框架无关的技术,然而不同的前端框架(如 React、Vue、Angular)对它的使用方式会有所不同。下面分别讲解如何在这几个框架中使用 CSS Modules。

1. React 中使用 CSS Modules

React 是 CSS Modules 最常用的框架之一,它支持组件化开发,可以很方便地将样式与组件进行封装。

安装依赖:

首先,在 React 项目中使用 CSS Modules,通常需要安装 css-loaderstyle-loader(如果使用 Webpack)。

npm install --save-dev css-loader style-loader
配置 Webpack:

在 Webpack 中配置 CSS Modules,通常需要针对 .module.css 文件进行特别处理:

module: {rules: [{test: /\.module\.css$/,use: ['style-loader', 'css-loader?modules'],},{test: /\.css$/,exclude: /\.module\.css$/,use: ['style-loader', 'css-loader'],},],
}
使用 CSS Modules:
  1. 创建一个 Button.module.css 文件:
/* Button.module.css */
.button {background-color: blue;color: white;padding: 10px;
}
  1. 在 React 组件中导入并使用样式:
import React from 'react';
import styles from './Button.module.css';const Button = () => {return <button className={styles.button}>Click Me</button>;
};export default Button;

在这里,styles.button 会被转换为一个唯一的类名(例如 Button_button__1a2b3),从而避免样式冲突。

使用 classnames 动态组合类名

React 项目中常会根据不同状态动态切换样式。classnames 是一个常用工具库。

npm install classnames
import classNames from 'classnames';
import styles from './Button.module.css';

const Button = ({ isPrimary, isDisabled, children }) => {const buttonClass = classNames({[styles.primary]: isPrimary,[styles.secondary]: !isPrimary,[styles.disabled]: isDisabled,});
return <button className={buttonClass}>{children}</button>;
};

2. Vue 中使用 CSS Modules

Vue 支持 CSS Modules,可以在 Vue 单文件组件(SFC)中使用。

安装依赖:

在 Vue 项目中,首先需要安装 css-loadervue-loader

npm install --save-dev css-loader vue-loader
配置 Webpack:

vue-loader 中开启 CSS Modules 支持,你可以像这样配置 Webpack:

module: {rules: [{test: /\.module\.css$/,use: ['vue-style-loader', 'css-loader?modules'],},{test: /\.css$/,exclude: /\.module\.css$/,use: ['vue-style-loader', 'css-loader'],},],
}
使用 CSS Modules:

在 Vue 单文件组件中,使用 module 属性启用 CSS Modules。

<template><button :class="$style.button">Click Me</button>
</template><script>
export default {name: 'Button',
};
</script><style module>
.button {background-color: green;color: white;padding: 10px;
}
</style>

在这里,$style.button 会被 Vue 组件自动处理为一个唯一的类名,确保样式的局部作用域,如果类名为短线相连的,可以用$style['wrap-btn']

3. Angular 中使用 CSS Modules

Angular 原生不支持 CSS Modules,但是你可以通过 Webpack 配置来实现类似的效果。可以借助第三方库或直接配置 Webpack 来使其支持。

安装依赖:

在 Angular 项目中,需要安装 css-loaderstyle-loader 来处理 CSS Modules。

npm install --save-dev css-loader style-loader
配置 Webpack:

你需要为 Angular 项目配置 Webpack,使其支持 CSS Modules。Angular CLI 本身并不支持直接使用 CSS Modules,但你可以通过 angular.json 配置来引入自定义 Webpack 配置。

例如,你可以通过 @angular-builders/custom-webpack 来扩展 Angular CLI:

npm install @angular-builders/custom-webpack --save-dev

然后修改 angular.json 配置,添加 Webpack 自定义构建选项,启用 CSS Modules:

"architect": {"build": {"builder": "@angular-builders/custom-webpack:browser","options": {"customWebpackConfig": {"path": "./webpack.config.js"}}}
}

接着,在 webpack.config.js 中添加 CSS Modules 配置:

module.exports = {module: {rules: [{test: /\.module\.css$/,use: ['style-loader', 'css-loader?modules'],},],},
};
使用 CSS Modules:

在 Angular 组件中导入并使用 CSS Modules:

/* button.module.css */
.button {background-color: red;color: white;
}
// button.component.ts
import { Component } from '@angular/core';
import styles from './button.module.css';@Component({selector: 'app-button',template: `<button [ngClass]="styles.button">Click Me</button>`,styleUrls: ['./button.component.css']
})
export class ButtonComponent {styles = styles;
}

4. 其他框架(如 Svelte)中使用 CSS Modules

Svelte 也可以利用 CSS Modules 进行局部样式的隔离,Svelte 默认支持 scoped CSS,但是如果你想使用 CSS Modules 的方式,通常需要通过第三方插件来实现。

安装依赖:
npm install --save-dev svelte-preprocess
配置 Svelte:

svelte.config.js 中配置 svelte-preprocess,并启用 CSS Modules:

import sveltePreprocess from 'svelte-preprocess';export default {preprocess: sveltePreprocess({postcss: {plugins: [require('postcss-modules')()]}})
};
使用 CSS Modules:
/* Button.module.css */
.button {background-color: yellow;color: black;
}
<script>import styles from './Button.module.css';
</script><button class={styles.button}>Click Me</button>

总结

不同框架中的 CSS Modules 使用方式略有不同,但本质上都遵循以下步骤:

  1. 创建 .module.css 样式文件。
  2. 配置 Webpack 或其他构建工具来支持 CSS Modules。
  3. 在组件中导入样式并使用自动生成的唯一类名。

React 和 Vue 的支持较为直接和简便,而 Angular 和 Svelte 需要一些额外的配置或插件支持。但无论哪个框架,CSS Modules 都能有效避免样式冲突,并提升组件化开发的效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59268.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RPA 机器人流程自动化

RPA&#xff08;机器人流程自动化&#xff09;机器人的部署通常包括以下几个主要步骤&#xff1a; 1. 准备工作 环境准备&#xff1a;确定机器人的运行环境&#xff0c;通常需要服务器或虚拟机&#xff0c;安装 RPA 软件&#xff08;如 UiPath、Automation Anywhere、Blue …

深入解析TOML、XML、YAML和JSON:优劣对比与场景应用

摘要&#xff1a;本文将介绍四种常见的配置文件和数据交换格式&#xff1a;TOML、XML、YAML和JSON&#xff0c;通过具体的使用例子分析它们的优缺点&#xff0c;并探讨在不同场景下的应用选择。 正文&#xff1a; 一、TOML 优点&#xff1a; 易于阅读和编写&#xff1a;TOML的…

【服务器】本地安装X11 服务器-Windows

【服务器】本地安装X11 服务器-Windows X11 服务器概述X Window System 简介 本地安装X11 服务器另&#xff1a;采用 MobaXterm (自带 X server) 连接远程服务器简单说明流程&#xff1a; 参考 X11 服务器概述 X11 服务器 是 X Window System&#xff08;简称 X11 或 X&#x…

Spring Boot 启动时自动配置 RabbitMQ 交换机、队列和绑定关系

在使用 Spring Boot 开发消息队列应用时&#xff0c;我们经常需要在应用启动时自动创建 RabbitMQ 的交换机、队列和绑定关系。本文将介绍如何通过 Spring Boot 的启动后执行方法来实现这一功能&#xff0c;并提供相应的演示代码和依赖配置。 一、添加依赖 为了在 Spring Boot…

【机器学习】机器学习中用到的高等数学知识-3.微积分 (Calculus)

3. 微积分 (Calculus) 导数和梯度&#xff1a;用于优化算法&#xff08;如梯度下降&#xff09;中计算损失函数的最小值。偏导数&#xff1a;在多变量函数中优化目标函数。链式法则&#xff1a;在反向传播算法中用于计算神经网络的梯度。 导数和梯度&#xff1a;用于优化算法…

Java 网络通信之 Socket 编程全解析

在当今数字化时代&#xff0c;网络通信已经成为各种应用程序不可或缺的一部分。Java 作为一种广泛应用的编程语言&#xff0c;提供了强大的网络编程能力&#xff0c;其中 Socket 编程是实现网络通信的重要手段。本文将详细介绍如何使用 Java 进行网络通信&#xff0c;重点聚焦于…

黎巴嫩和以色列的比较

现在两国战争进行的如火如荼&#xff0c;西瓜视频相关军事评论层出不穷。 ------------------------------------------ 黎巴嫩概况&#xff1a;1943年11月独立&#xff0c;国土面积10452平方公里&#xff0c;人口约607万&#xff0c;绝大多数为阿拉伯人&#xff0c;官方语言…

“Java面试必看:从基础到进阶的全方位准备指南“(2)

9. **String和StringBuffer, StringBuilder的区别有哪些&#xff1f;所有类名包含Buffer的类的内部实现原理是什么&#xff1f;有什么优势&#xff1f;** - **String**&#xff1a;String是不可变类&#xff0c;每次对字符串进行修改&#xff08;如拼接、替换等&#xff09;都会…

《EasyQuotation 与MongoDB在股市信息的奇妙融合》

《EasyQuotation 与MongoDB在股市信息的奇妙融合》 一、EasyQuotation 的强大功能二、数据存入 MongoDB&#xff08;一&#xff09;配置与连接&#xff08;二&#xff09;存储方法 三、K 线图监视股市信息&#xff08;一&#xff09;自定义性能趋势图表&#xff08;二&#xff…

Kafka新节点加入集群操作指南

一、环境准备 1. Java环境安装 # 安装JDK apt-get update apt-get install openjdk-8-jdk -y2. 下载并解压 wget https://archive.apache.org/dist/kafka/2.8.1/kafka_2.13-2.8.1.tgz tar xf kafka_2.13-2.8.1.tgz mv kafka_2.13-2.8.1 kafka二、配置环境变量 1. 创建kafka…

git配置用户信息

在 Git 中配置用户信息&#xff0c;主要是设置你的用户名和电子邮件地址&#xff0c;这些信息会被 Git 用来记录提交的作者信息。以下是配置用户信息的步骤&#xff1a; 打开命令行工具。 设置你的用户名&#xff1a; git config --global user.name "你的名字"例如…

vue3项目初始化完整流程,vue3+TypeScript+vue-router+pinia+element-plus+axios+unocss+mock

2.1项目初始化 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范&#xff0c;需要使用eslintstylelintprettier来对我们的代码质量做检测和修复&#xff0c;需要使用husky来做commit拦截&#xff0c;需要使用commitlint来统一提交规范&#xff0c;…

[Import REC] Import REC下载及使用Import REC重建引入表Import table详细过程(附有下载文件)

前言 下载 使用夸克网盘打开链接&#xff0c;给出的是绿化版免安装 Import REC 链接&#xff1a;https://pan.quark.cn/s/552e4c1ea7d6 提取码&#xff1a;qEMM 下载之后解压得到 里面有使用更新说明 使用修复import table 演示 现在有一个程序&#xff0c;放入PEiD进行查壳…

MySQL技巧之跨服务器数据查询:高级篇-先调用A数据库的MySql存储过程再复制到B数据库的表中

MySQL技巧之跨服务器数据查询&#xff1a;高级篇-先调用A数据库的MySql存储过程再复制到B数据库的表中 基础篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的…

AI制作表情包,每月躺赚1W+,完整流程制作多重变现教学

项目介绍 AI制作表情包项目是一个利用ai&#xff0c;快速生成表情包的副业项目。 在社交平台如微信、QQ等&#xff0c;表情包已成为日常沟通不可或缺的一部分。通过AI技术&#xff0c;我们可以轻松制作出大量表情包&#xff0c;并通过多种渠道实现变现&#xff0c;非常适合追…

入侵排查之Linux

目录 1.黑客入侵后的利用思路 2.入侵排查思路 2.1.账号安全 2.1.1.用户信息文件/etc/passwd 2.1.2.影子文件/etc/shadow 2.1.3.入侵排查 2.1.3.1.排查当前系统登录信息 2.1.4.2.查询可以远程登录的账号信息 2.2.历史命令 2.2.1.基本使用 2.2.1.1.root历史命令 2.2.…

【OceanBase 诊断调优】—— 止血良方「SQL 限流」

1. 知识点 1. 对于Oceanbase&#xff0c;限流的意思是限制其在单台主机上处理的并发度&#xff0c;因此假设对某SQL限流的并发度为1&#xff0c;该集群有N台机器可以执行该SQL&#xff0c;则实际并发度是N。 2. OceanBase 是通过在 SQL 上绑定 Outline 的方式来实现的&#x…

excel使用

上中下旬的逾期金额 步骤&#xff1a; 1、先判断上中下旬的时间范围 2、根据城市和时间求和&#xff0c;算出对应的逾期金额 问题&#xff1a;当从左插入列时&#xff0c;列的格式与原本一致&#xff0c;当我们想看数值时&#xff0c;发现为日期 解决&#xff1a;在开始-数据格…

MySQL远程连接错误解决:Host is not allowed to connect to this MySQL server

1. 异常错误 通过远程客户端访问MySQL服务器时会遇到“Host is not allowed to connect to this MySQL server”的错误提示。 2. 原因 MySQL服务器当前配置不允许来自特定主机的连接尝试。 3. 解决方法 允许远程主机访问MySQL服务器&#xff0c;按照以下步骤操作&#xff…

MySQL算数运算符基础:详解与入门

目录 背景&#xff1a; 过程&#xff1a; 1.加法与减法运算符 1.2扩展&#xff1a; 1.3运算结果得出结论 &#xff1a; 2.乘法和除法运算 ​2.1练习&#xff1a; 2.2运算结果得出结论 &#xff1a; 3.求模取余运算符 3.1练习&#xff1a; 总结&#xff1a; 背景&a…