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;}