遇到問題

在這次的項目中，我在寫登錄注冊模塊時，想給注冊頁面添加一些樣式，發現我所添加的樣式是全局有效，導致我的登錄頁面樣式也受到了影響，以前我們的解決辦法是確保給每個頁面的樣式起不同的類名，但是這次我想用一些簡便的方法。

google查找解決方案

我想這樣的問題，別人肯定也遇到過，肯定已經有解決的辦法，之后就在網上發現好多可供使用的插件,分別有：

css in js
css modules
ant-design

詳細介紹
而我選擇了眼熟的css-module使用

概念學習css-module

thumbnail.png

代碼實現

1. webpack.config.js文件中進行相應的配置，添加如下代碼段

 {
                test: /\.css$/,
                loader: "style-loader!css-loader?modules"
}

下面是我項目中webpack.config.js文件的配置

var path = require('path');
module.exports = {
    entry: './public/src/entry.js',
    output: {
        path: path.join(__dirname, 'public/dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader?modules"
            }, 
            {test: /\.png$/, loader: "file-loader"},
            {test: /\.jpg$/, loader: "file-loader"},
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

2.接下來就是在react下使用代碼實現了，我的思路是這樣的：首先創建兩個文件login.js和resigner.js,再分別創建兩個對應的css文件login.css和resigner.css文件
我在login.js和resigner.js中分別定義兩個相同的類名title的輸入框，在login.css和resigner.css中兩個title分別添加不同的樣式，如果樣式正常顯示，則說明css-module應用正常。

login.js
import React, {Component} from "react";
import {render} from "react-dom";
import style from "../../../assest/css/login.css"

class Login extends Component {
    render() {
        return <div>
            <form action="">
                用戶名：<input id="userName" type="text" placeholder="輸入姓名" className={style.title}/>
            </form>
        </div>
    }
}
export default Login;

resigner.js

import React, {Component} from "react";
import {render} from "react-dom";
import style from '../../../assest/css/resigner.css';

class Resigner extends Component {
    render() {
        return <div id="form">
            <div>
                <input id="userName" type="text" placeholder="輸入姓名" className={style.title}/>
            </div>
             <div>
                <input type="submit" value='注冊' onClick={this.handleChange.bind(this)}/>
            </div>
        </div>
    }
}
export default Resigner;

login.css

.title {
  background-color: aquamarine;
}

resigner.css

.title {
    background-color: blanchedalmond;
}

代碼解釋:
在兩個js文件中我分別給input輸入框的className賦值為{style.title}，這樣css-module在編譯期間就會分別生成一個唯一的哈希字符串類名。

3.運行結果

css-module.png

希望這篇文章能夠有幫到你～
有任何問題可以在下面留言哦