用的css预处理器用sass,其他大同小异。

用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆);

配置sass,用的最新的CRA,webpack4;

webpack.config.dev.js (webpack.config.prod.js需相同配置一份):

module下的rules 中 oneOf 修改&增加 
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.sass$/, /\.scss$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(scss|sass)$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1,modules: true } },
'sass-loader'
]
// loaders: ['style-loader', 'css-loader', 'sass-loader']
}

其中modules: true 意思是开启模块化css处理

css:

.body
border: 1px solid red
.body-wrapper
border: 2px solid red

页面引入:

import indexCss from '../../css/style.scss';
使用:
className={indexCss.body}
className={indexCss["body-wrapper"]}
注意className带符号的 要用indexCss["body-wrapper"]这种形式
效果可以看到 class name都加上了编译:

有些样式不需要编译,就要:global(className)来标识这个类是全局类名,因此CSS Modules不对其类名进行转化:

结构:

import React, { Component } from "react";
import indexCss from '../../css/style.scss'; export default class Index extends Component{
render() {
return(
<div className={indexCss["body-wrapper"]}>
<div className={indexCss.body}>
<span>关于我们</span>
<span className={indexCss.name}>name</span>
</div>
<div className="title">title标题</div>
</div>
);
}
}

样式:

.body{
border: 1px solid red;
}
.body-wrapper{
padding: 50px;
border: 2px solid red;
.name{
color: red;
}
}
:global(.title) {
color: blue
}

效果:

create-react-app创建react项目 css模块化处理的更多相关文章

  1. 爬虫学习笔记(2)--创建scrapy项目&&css选择器

    一.手动创建scrapy项目---------------- 安装scrapy: pip install -i https://pypi.douban.com/simple/  scrapy    1 ...

  2. 利用 Create React Native App 创建 React Native 应用

    $ npm i -g create-react-native-app $ create-react-native-app my-project $ cd my-project $ npm start

  3. Android Studio打开React Native创建的项目

    1.点击 Import project 2.找到项目下android文件夹,选择build.gradle文件,open

  4. vs 2019 create new project 创建新项目

    下面的place solution and project in the same directory 不需要勾选

  5. react初探索--react + react-router + ant-design 后台管理系统配置

    首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...

  6. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  7. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  8. VUE,基于vue-cli搭建创建vue项目

    前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...

  9. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

随机推荐

  1. [转] 有关java中两个整数的交换问题

    转载申明:本文主要是用于自己学习使用,为了完善自己的只是框架,没有任何的商业目的. 原文来源:有关Java中两个整数的交换问题 如果侵权,麻烦告之,立刻删除. 在程序开发的过程,要交换两个变量的内容, ...

  2. Grunt中批量无损压缩图片插件--grunt-sprite

    这是什么 这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具,它的主要功能是: 使用二叉树排列算法,对css文件进行处理,收集切片序列,生成雪碧图 在原css代码中为切片添加backgr ...

  3. tensorflow节点布放(device assignment of node)算法:simpler_placer

    tensorflow v0.9中目前在用的devcie assignment算法是simple placer算法,相比于白皮书中cost model算法实现简单.simpler placer算法优先选 ...

  4. Objective-C 中的 assign, copy,retain,strong,weak 详解

    在IOS开发中,经常会使用   @property(nonatomic,copy)NSString * name;   语句来快速设置set get 方法,在此依次说明atomic .nonatomi ...

  5. iOS:文件操作相关(18-03-23更)

    0.iOS文件系统 1.工程内文件 2.文件夹管理 3.文件操作 4.NSCache 附录: 1.沙盒文件夹.文件大小 2.清除沙盒 Library / Cache 下所有数据 3.测试plist 0 ...

  6. 20181029noip模拟赛T1

    1.借书 [问题描述] Dilhao一共有n本教科书,每本教科书都有一个难度值,他每次出题的时候都会从其中挑两本教科书作为借鉴,如果这两本书的难度相差越大,Dilhao出的题就会越复杂,也就是说,一道 ...

  7. chromium之scoped_ptr

    看看怎么使用 // Scopers help you manage ownership of a pointer, helping you easily manage the // a pointer ...

  8. .net core 基于Claim登录验证

    网站,首先需要安全,实现安全就必须使用登录验证,.net core 基于Claim登录验证就很简单使用. Claim是什么,可以理解为你的身份证的中的名字,性别等等的每一条信息,然后Claim组成一个 ...

  9. 利用MyFlash闪回丢失数据(续)

          last night,i've tested flashback by MyFlash tool,but failed,now let's do some other test with ...

  10. HTML | video的封面平铺方法

    <video style="object-fit:fill;"></video>