create-react-app创建react项目 css模块化处理
用的css预处理器用sass,其他大同小异。
用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆);
配置sass,用的最新的CRA,webpack4;
webpack.config.dev.js (webpack.config.prod.js需相同配置一份):
{
// 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
页面引入:
有些样式不需要编译,就要: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模块化处理的更多相关文章
- 爬虫学习笔记(2)--创建scrapy项目&&css选择器
一.手动创建scrapy项目---------------- 安装scrapy: pip install -i https://pypi.douban.com/simple/ scrapy 1 ...
- 利用 Create React Native App 创建 React Native 应用
$ npm i -g create-react-native-app $ create-react-native-app my-project $ cd my-project $ npm start
- Android Studio打开React Native创建的项目
1.点击 Import project 2.找到项目下android文件夹,选择build.gradle文件,open
- vs 2019 create new project 创建新项目
下面的place solution and project in the same directory 不需要勾选
- react初探索--react + react-router + ant-design 后台管理系统配置
首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- React 学习(一) ---- React Element /组件/JSX
学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
- VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
随机推荐
- git 比较不同版本文件的差异
Git 比较不同版本文件差异的常用命令格式: git diff 查看尚未暂存的文件更新了哪些部分 git diff filename 查看尚未暂存的某个文件更新了哪些 git diff –cached ...
- java三大特性(封装、继承、多态)
oop(面向对象程序设计)具有三大特性:封装.继承.多态 一.封装 封装就是讲类的信息隐藏在类的内部,不允许外部程序直接访问,而是通过该类的实现隐藏信息的操作和访问. 实现封装 1.需要修改属性的访问 ...
- win8安装wampserver报403错误解决方法
看着别人开始体验win8了,前几天我也安装了win8系统,总体来说还不错,但是今天安装完Wampserver后,浏览器输入localhost,竟然报了403错误,我以为我安装出错了,后来研究了半天,发 ...
- 统计 SQL Server中的 Job 情况
SELECT J.name 作业名称, P.step_id'步骤编号',P.step_name'步骤名称',p.SubSystem '步骤类型',P.command'执行命令', CASE freq_ ...
- MyBatis之Mapper XML 文件详解(四)-JDBC 类型和嵌套查询
支持的 JDBC 类型为了未来的参考,MyBatis 通过包含的 jdbcType 枚举型,支持下面的 JDBC 类型. BITFLOATCHARTIMESTAMPOTHERUNDEFINEDTINY ...
- 修改本机默认的jdk版本
因为开发需要使用多个jdk,在修改jdk版本时遇到了一些问题 在系统变量的%JAVA_HOME%中修改了jdk的路径,但是重启后java -version版本并没有改变. 在网上找到一篇文章,修改了注 ...
- 《Linux 学习》01---redis安装, 并使用Redis Desktop Manager 连接
一.环境简介: linux 系统:centos 7.X 二.安装大纲: 1.下载安装包 2.安装 3.统一管理redis 配置文件 4.编辑redis配置文件,设置常用的功能 5.(1)命令启动,连接 ...
- Vue--- 一点车项目
一点车项目 cli脚手架 + 组件化 +数据交互+路由指向+存入数据库 前端页面 cli脚手架的安装与搭建 创建对应包 页面组件化编辑 (共享组件:摘取出来一模一样的组件重用)(私有组件:在自 ...
- Spring + Mybatis应该如何配置
### 1. MYBATIS简介 MYBATIS是持久层框架,大大的简化了持久层开发. 当使用MYBATIS框架时,开发人员不必再编写繁琐的JDBC代码,只需要定义好每个功能对应的抽象方法与需要执行的 ...
- MAMP:MySQL wasn't able to start
MAMP 我点击start server的时候 发现mysql服务器打不开 http://images.cnblogs.com/cnblogs_com/lwwen/1231721/o_11111111 ...