在 Create React App 中使用 CSS Modules

暖生發表於2019-01-14
ReactAPPCSS

本文介紹瞭如何在 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，如下圖：

    新增 modules 屬性

用法

和第一種方式的用法一致，只是不需要在 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，需要先進行相應配置。

關於如何在 create-react-app 腳手架中啟用 sass 和 less 語法，可參考我的下一篇文章：

在 Create React App 中啟用 Sass 和 Less。

相關文章