reactJS -- 12 CSS 模块化

一.安装依赖包（完成模块化）

若是项目运行时 ，依赖包出现了问题，把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 (
      <footer className={footerCss.miniFooter}>
        <h1>这里是页脚，通常放置版权信息</h1>
      </footer>
    )
  }
}

这样，其余文件中就算类名同样，也不会被调用。

console.log(footerCss); 类名对应被修改，一一对应。使样式与组件彻底不冲突。

7. 给全部的文件使用样式

:global(.类名){color:red;}