在react脚手架中已经有了sass的配置，因此只需要安装sass的依赖包，就可以直接使用sass了

• 安装sass依赖包

npm i sass -D 

- 把index.css改成index.scss
- 导入index.scss文件
注意：如果使用了scss，scss中使用图片的绝对路径的时候需要加上~ 

background-image: url(~assets/login.png); 

 css-样式私有化

css modules-基本使用

步骤

1. 改样式文件名。从 xx.scss -> xx.module.scss （React脚手架中的约定，与普通 CSS 作区分）

2. 引入使用。

   1. 组件中导入该样式文件（注意语法）

      import styles from './index.module.scss'

   2. 通过 styles 对象访问对象中的样式名来设置样式

      css类名是index.module.scss中定义的类名。

 示例

定义样式 index.module.css 

.root {font-size: 100px;}

 使用样式

import styles from './index.module.css'div的内容

原理

CSS Modules 通过自动给 CSS 类名补足类名，保证类名的唯一性，从而避免样式冲突的问题 
 

css module的注意点 

类名最好使用驼峰命名，因为最终类名会生成styles的一个属性

cssModules-维持类名 

格式

在xxx.module.scss中，如果希望维持类名，可以使用格式：

:global(.类名)

/*这样css modules就不会修改掉类名.a了。等价于写在 index.css中 */
:global(.a) {   }/* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */
.aa :golbal(.a) { }

覆盖第三方组件的样式

:global(.ant-btn) {color: red !important;
}

css modules-最佳实践

- 每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名： root ）
- 其他所有的子节点，都使用普通的 CSS 类名 :global

index.module.scss中

// index.module.scss
.root {display: 'block';position: 'absolute';// 此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名// 如果不加 :global ，所有类名就必须添加 styles.title 才可以:global {.title {.text {}span {}}.login-form { ... }}
}

组件使用

import styles from './index.module.scss'
const 组件 = () => {return ({/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}{/* （2） 所有子节点，都使用普通的 CSS 类名*/}
登录  登录  
)
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！