前提條件

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),豐縣企業(yè)網(wǎng)站建設(shè),豐縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,豐縣網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,豐縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

請(qǐng)先進(jìn)行全局安裝 create-react-app 插件哈，安裝命令：npm install create-react-app -g

先使用 create-react-app 命令下載一個(gè)腳手架工程，安裝命令：

# 使用 npx
$ npx create-react-app my-app

# 使用 npm 
$ npm init npx create-react-app my-app

# 使用 yarn
$ yarn create react-app my-app

運(yùn)行項(xiàng)目

$ cd my-app

# 使用 npm
$ npm start

# 或者使用yarn
# yarn start

在瀏覽器中輸入 http://localhost:3000 查看項(xiàng)目效果

使用 CSS Module 的第一種方式

create-react-app 中內(nèi)置了使用 CSS Modules 的配置，當(dāng)前方式就是使用 create-react-app 內(nèi)置的用法

方式

將所有的 .css/.lee/.scss 等樣式文件都修改成 .module.css/.module.less/.module.scss 等。即可使用 CSS Modules 的方式進(jìn)行引入使用了。

用法

編寫(xiě)一個(gè) css 文件：Button.module.css

.error {
  background-color: red;
}

在編寫(xiě)一個(gè)普通的 css 文件：another-stylesheet.css

.error {
  color: red;
}

在 js 文件中使用 CSS Modules 的方式進(jìn)行引用：Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
 render() {
  // reference as a js object
  return Error Button;
 }
}

在瀏覽器中查看效果

此時(shí) Button 組件的背景顏色是紅色，但是字體顏色卻不是紅色，因?yàn)槭褂昧?Css Modules 之后，普通的 css 樣式就不起效果了，需要用全局的方式編寫(xiě)才可以(:global)。 最后添加到元素上的樣式結(jié)果為： Error Button

使用 CSS Module 的第二種方式

方式

在命令行運(yùn)行 npm run eject 命令

此命令會(huì)將腳手架中隱藏的配置都展示出來(lái)，此過(guò)程不可逆

運(yùn)行完成之后，打開(kāi) config 目錄下的 webpack.config.js 文件，找到 test: cssRegex 這一行

在 use 屬性執(zhí)行的方法中添加 modules: true ，如下圖：

用法

和第一種方式的用法一致，只是不需要在 css 文件后面加 .module 后綴了

編寫(xiě)一個(gè) css 文件：Button.css

.error {
  background-color: red;
}

再編寫(xiě)一個(gè)普通的 css 文件：another-stylesheet.css

.error {
  color: red;
}

在 js 文件中使用 CSS Modules 的方式進(jìn)行引用：Button.js

import React, { Component } from 'react';
import styles from './Button.css'; // 可以直接使用 CSS Modules 的方式引入了
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
 render() {
  // reference as a js object
  return Error Button;
 }
}

在瀏覽器中查看效果

此時(shí) Button 組件的背景顏色是紅色，但是字體顏色卻不是紅色，因?yàn)槭褂昧?Css Modules 之后，普通的 css 樣式就不起效果了，需要用全局的方式編寫(xiě)才可以(:global)。 最后添加到元素上的樣式結(jié)果為： Error Button

如想使用第二種方式對(duì) sass 和 less 也使用 CSS Modules 的方式進(jìn)行引用，則類(lèi)似的在 sass 和 less 解析配置上也添加modules: true 即可。

注意

默認(rèn) create-react-app 腳手架不能直接使用 sass 和 less 直接編寫(xiě) css，需要先進(jìn)行相應(yīng)配置。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。