一.安装依赖包（完成模块化）
如果项目运行时 ，依赖包出现了问题，把node_modules 中的包都删掉，只要有package.json 都可以再重新装。运行命令。
可以引入如下包；
"babel-plugin-react-html-attrs": "^2.0.0", "style-loader": "^0.13.1", "css-loader": "^0.25.0"
1.在 package.json 中加入 以上配置
"author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.1", "es2015": "0.0.0", "eslint": "^3.19.0", "eslint-loader": "^1.7.1", "html-webpack-plugin": "^2.28.0", "react": "^15.5.4", "react-dom": "^15.5.4", "react-hot-loader": "^1.3.1", "style-loader": "^0.17.0", "webpack": "^2.3.2", "webpack-dev-server": "^2.4.2", "babel-plugin-react-html-attrs": "^2.0.0", "style-loader": "^0.13.1", "css-loader": "^0.25.0" 2.运行命令
重新检测安装。发现有新的配置，会自动安装
sudo npm install
3.配置讲解
插件： "babel-plugin-react-html-attrs": "^2.0.0",。
这个可以在代码中 直接使用 class 不用 写为 className
4.在webPack.config.js中配置
这个配置使下面调用 css 不会与其他重合。
oaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", include: __dirname, query: { presets: [ "es2015", "react" ] }, }, //下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用 { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' } ] 5.创建 footer.css
.miniFooter{ background-color: #333; color: #fff; padding-left: 20px; padding-top: 3px; padding-bottom: 3px;} 6.在 footer.js中使用
将css引用后，声明为一个参数
import React from 'react';import ReactDOM from 'react-dom';var footerCss = require("../../css/footer.css");//export 暴露export default class ComponentFooter extends React.Component{ render(){ //解析类的输出 console.log(footerCss); return ( ) }} 这样，其他文件中就算类名一样，也不会被调用。
console.log(footerCss); 类名对应被修改，一一对应。使样式与组件完全不冲突。
7. 给所有的文件使用样式
:global(.类名){color:red;}