在Create React App中使用CSS Modules的方法示例

前提條件

請先進行全局安裝 create-react-app 插件哈，安裝命令：npm install create-react-app -g

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

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

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

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

運行項目

$ cd my-app

# 使用 npm
$ npm start

# 或者使用yarn
# yarn start

在瀏覽器中輸入 http://localhost:3000 查看項目效果

使用 CSS Module 的第一種方式

create-react-app 中內置了使用 CSS Modules 的配置，當前方式就是使用 create-react-app 內置的用法

方式

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

用法

編寫一個 css 文件：Button.module.css

.error {
  background-color: red;
}

在編寫一個普通的 css 文件：another-stylesheet.css

.error {
  color: red;
}

在 js 文件中使用 CSS Modules 的方式進行引用：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 <button className={styles.error}>Error Button</button>;
 }
}

在瀏覽器中查看效果

此時 Button 組件的背景顏色是紅色，但是字體顏色卻不是紅色，因為使用了 Css Modules 之后，普通的 css 樣式就不起效果了，需要用全局的方式編寫才可以(:global)。 最后添加到元素上的樣式結果為： <button class="Button_error_ax7yz">Error Button</button>

使用 CSS Module 的第二種方式

方式

在命令行運行 npm run eject 命令

此命令會將腳手架中隱藏的配置都展示出來，此過程不可逆

運行完成之后，打開 config 目錄下的 webpack.config.js 文件，找到 test: cssRegex 這一行

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

用法

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

編寫一個 css 文件：Button.css

.error {
  background-color: red;
}

再編寫一個普通的 css 文件：another-stylesheet.css

.error {
  color: red;
}

在 js 文件中使用 CSS Modules 的方式進行引用：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 <button className={styles.error}>Error Button</button>;
 }
}

在瀏覽器中查看效果

此時 Button 組件的背景顏色是紅色，但是字體顏色卻不是紅色，因為使用了 Css Modules 之后，普通的 css 樣式就不起效果了，需要用全局的方式編寫才可以(:global)。 最后添加到元素上的樣式結果為： <button class="Button_error_ax7yz">Error Button</button>

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

注意

默認 create-react-app 腳手架不能直接使用 sass 和 less 直接編寫 css，需要先進行相應配置。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。