SCSS Module 这样处理配置和使用太赞了

于 2023-12-09 15:28:19 发布
阅读量704 收藏 5
点赞数 5
文章标签： scss 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zshsats/article/details/134895800
版权

SCSS Module 只是Scss和Css Module结合，可以利用SCSS对代码静态处理的能力，使得样式处理更强大一些，并不是什么新的东西，对比css-in-js和scoped，个人偏向喜欢Scss Module做样式隔离，先说一下优点：

  1. 配置灵活，可根据具体业务需要选择不同的模式
  2. 定制化className，更灵活，可以根据自己的需要定制每个模块className 输出
  3. 调试更方便，通过className可以直观的找到代码所在的位置
  4. 利用CSS Module的作用域可以方便对已有的样式可进行二次覆盖，达到理想效果
  5. 增加Scss，对样式处理更加方便

下面就从配置和作用域两方面来学会SCss Module吧，相信你也会爱上它的

1. mode 的属性 "local","global","icss","pure",的区别

2.如何自定义生成类名

3.exportLocalsConvention 有什么作用

4. css module 本地作用域和全局作用域的区别

5.如何使用Scss module 进行样式覆盖，有什么技巧

这个也是我的，希望大家点赞关注，详细内容可参考我的文章地址

优资园
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用styled-components | xxx.module.scss 提高代码质量
weixin_43883615的博客
05-31 491
styled-components是一种受欢迎的CSS库，可以在React项目中处理样式问题，简化CSS的编写和组织。test.module.scss是scss的模块化写法，通过这种方式可以帮助管理样式并减少样式冲突，使样式代码更加可视化和可阅读。
typed-scss-modules：using使用SCSS为CSS模块生成类型定义（.d.ts）
01-29
:wrapped_gift: typed-scss-模块 生成打字稿定义（ .d.ts对于那些写在SCSS（CSS模块）文件.scss ）。 查看有关此软件包背后的原理和灵感的信息。 例如，给出以下SCSS： @import " variables " ; .text { color : $blue ; & -highlighted { color : $yellow ; } } 将生成以下类型定义： export const text : string ; export const textHighlighted : string ; 基本用法 安装并作为devDependency运行： yarn add -D typed-scss-modules yarn tsm src 或者，全局安装： yarn global add typed-scss-modules tsm src 或者，使用npm： npm install -D typed-scss-modules ./node_modules/.bin/tsm src 高级用法 对于所有可能的命
alldish.module.scss
weixin_47752439的博客
07-28 143
.content{ background: #F5F7F9; height: 667px; overflow-x: hidden; overflow-y: scroll; .item{ background: #fff; padding: 10px 15px; margin-bottom: 10px; box-sizing: border-box; .person{
react 中 css scss module
weixin_42756432的博客
05-31 4012
文章目录前言一、css module二、sass 前言 在react项目中，随着项目的庞大模块功能的复杂，引入css文件根据个人情况不同，难免会造成class样式冲突，而且react不像vue，每个组件的样式都会通过scope封装一层，这样就需要自己去注意样式的冲突，css module 就是和vue scope的模式一样，通过对class样式的名字进行封装处理，从而达到class类名不冲突 一、css module 使用.css文件进行模块化，需要webpack配置，使用css-loader开启模块.
dishDetail.module.scss
weixin_47752439的博客
07-28 122
.person{ display: flex; justify-content: left; align-items: center; margin: 10px 0; padding: 0 15px; .div1{ width: 38px; margin-right: 15px; img{ width: 38px; height: 38px;
一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）
黄彪博客
06-17 5121
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
vue安装和使用scss及sass与scss的区别详解
10-17
接下来，你需要在项目的 `webpack.base.conf.js` 文件中配置 `module`，添加对 SCSS 文件的处理规则： ```javascript module: { rules: [ // 添加以下规则 { test: /\.scss$/, loaders: ["style", "css", ...
详解webpack之scss和postcss-loader的配置
08-28
本文主要介绍了Webpack中scss和postcss-loader的配置，包括postcss-loader的安装、配置和使用，scss的配置等内容。 Postcss-loader是Webpack中一个非常重要的loader，它可以将css代码转换成浏览器可以识别的格式，...
vue2配置scss的方法步骤
10-16
主要介绍了vue2配置scss的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack4 处理SCSS的方法示例
10-18
主要介绍了webpack4处理SCSS的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
scss用法
ll_1374679238的博客
04-23 3441
在项目中使用scss1.vue项目中使用npm引入scssnpm install --save-dev sass-loader  //安装scss支持npm install --save-dev node-sassbuild/webpack.base.conf.js中加入：{    test: /.s[a|c]ss$/,    loaders: ['style', 'css', 'sass'}.v...
.module.css文件介绍与优缺
weixin_41346012的博客
08-24 2423
module.css具有组件化，去污染，简洁易懂的优点 解决工程中的样式污染，module.css文件中的写法与css文件一致，需修改js/jsx文件中的引入和类名书写格式
create react app 后配置并启用scss_module带原来的class名
一枚不断学习的小码农一枚~
05-10 799
使用create react app 创建项目后， 使用以下文件引入sass文件中的className名不生效 我们发现页面中根本没有引用成功scss文件中的文件名 把creat react app默认sass module 配置项改为true,我们发现文件名生效了，但是class名全部变成了在全局可区分的hash值 ，根本分辨不出当前class名具体是哪个元素 因为css-loader默认的哈希算法是[hash:base64]，这会将.title编译成._3zyde4l1yATCOkgn-DBWEL
module&sass
DingDing_Zhang的博客
08-03 569
1.模块化概念 模块化是一个语言膨胀的必经之路，它能够帮助开发者拆分和组织代码 无模块化 JavaScript初衷：实现简单的页面交互逻辑，寥寥数语即可。随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀。这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 <script src="jquery.js"
Webpack: CSS 到 Sass/Scss 与 CSS Module
超悠閒的博客
08-07 1599
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录Webpack: CSS 到 Sass/Scss 与 CSS Module前言正文1. 在 JS 中引入 CSS：style-loader、css-lodaer2. 从 CSS 进阶到 SCSS：sass-loader + node-sass3. CSS Module 实现命名空间隔离：css-loader3.1 Typescript 场景下使用 CSS ModuleBonus: 踩坑记录结语其他资源参考连接完整代码示例 前
要想在 ***.module.scss 里写动画，需要这么么写
qq_57749525的博客
07-11 314
css
react中css modules基本使用
m0_52765288的博客
11-19 1415
1.下载引入包 npm i scss -D 2.修改样式文件名 从xx.scss -> xx.module.scss（React脚手架中的约定，与普通 CSS 作区分） 3.组件中进行使用 import styles from './index.module.scss' <div className={styles.css类名}></div> 4.最佳用法 每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名：root） ...
css、sass、less| module 样式模块化
08-13 5331
话不多说，以sass为例，咱们先来看看区别 首先，目录结构如下 一、正常书写 这里就称为三部曲吧， 1、写页面（不用多说，相信大家都会了）； 2、写正常样式（同上） 3、导入样式 1、全局 login中 import './login.scss';//导入样式 <div className="wrap"> <div className="title">登录页</div> <div className="content">global<
scss module
最新发布
08-20
引用中提到，使用scss module时，文件必须是xxx.module.scss，这样才会被匹配到进行模块化。在示例代码中，index.module.scss文件定义了一个名为.risk的class，并嵌套了一个名为.a的class。这样做可以使样式具有模块化的特性，避免了样式冲突的问题。 引用中提到，如果要使用.css文件进行模块化，需要进行webpack配置。使用css-loader开启模块化后，可以对css文件进行处理。在webpack配置中，可以通过设置modules为true，来开启模块化，并使用localIdentName来指定样式的命名规则，这样可以确保生成的类名不会冲突。 引用中指出，在React项目中，随着项目的庞大和模块功能的复杂化，引入css文件可能会导致样式冲突的问题。不像Vue一样，React组件的样式并没有自动进行封装。因此，为了避免样式冲突，可以使用css module来对class样式的名称进行封装处理，以确保class类名不会冲突。 综上所述，scss module是一种在React项目中解决样式冲突问题的方法，它通过对class样式的命名进行模块化处理，避免了样式冲突的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [react 中 css scss module](https://blog.csdn.net/weixin_42756432/article/details/117417660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值