react手机机端css_create-react-app创建react项目 css模块化处理

用的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';

exportdefaultclass Index extends Component{

render() {return(

关于我们

name

title标题

);

}

样式：

.body{

border: 1px solid red;

}

.body-wrapper{

padding: 50px;

border: 2px solid red;

.name{

color: red;

}

:global(.title) {

color: blue

}

效果：

react手机机端css_create-react-app创建react项目 css模块化处理相关推荐

react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
react手机机端css_react工程搭建系列之---移动端适配与antd-mobile高清适配方案
一.逻辑像素(css像素)与物理像素(设备像素) 机型逻辑像素物理像素 Scale Factor iphone 3GS 320 x 480 320 x 480 1x iphone 4 320 x ...
create react app创建的项目运行test的时候不能解析webpack的alisa配置的问题
使用babel插件npm install babel-plugin-module-resolver,并在.babelrc文件中加入如下: {"plugins": [["m ...
基于脚手架创建react项目
React(一)使用脚手架创建React项目: 转自: https://www.cnblogs.com/yulingjia/p/9583244.html D:\workbench_ws>npm ...
如何创建React项目
前言构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐) yeoman 脚手架搭建 react 项目 webpack 一步一步构建 react ...
react 组件引用组件_React Elements VS React组件
react 组件引用组件 A few months ago I posted to Twitter what I thought was a simple question: 几个月前,我在Twitt ...
React学习整理（一）：React 安装
官方提供的 CDN 地址: <script src="https://unpkg.com/react@16/umd/react.development.js">< ...
web前端高级React - React从入门到进阶之初识React
第一部分:React入门系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
利用 Create React Native App 快速创建 React Native 应用
React Native App简介打开React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页.Quick Start是在v0.4 ...

react手机机端css_create-react-app创建react项目 css模块化处理

react手机机端css_create-react-app创建react项目 css模块化处理相关推荐

最新文章

热门文章