在 Create React App 中使用 CSS Modules

時間 2019-11-07

標籤 create react app 使用 css modules 欄目 React 简体版

原文原文鏈接

本文介紹瞭如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。css

前提條件

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

先使用 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 查看項目效果webpack

使用 CSS Module 的第一種方式

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

方式

將全部的 .css/.lee/.scss 等樣式文件都修改爲 .module.css/.module.less/.module.scss 等。便可使用 CSS Modules 的方式進行引入使用了。npm

用法

編寫一個 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 命令sass

此命令會將腳手架中隱藏的配置都展現出來，此過程不可逆bash
運行完成以後，打開 config 目錄下的 webpack.config.js 文件，找到 test: cssRegex 這一行app
在 use 屬性執行的方法中添加 modules: true，以下圖： less

用法

和第一種方式的用法一致，只是不須要在 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>;
  }
}
複製代碼