CSS模块化

• "babel-plugin-react-html-attrs": "^2.0.0"让JSX中className能变回原来class

• webpack要重新配置

// webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
  devtool: 'source-map',
  context: path.resolve(__dirname, "src"),
  entry: "./js/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js' // 打包输出的文件
  },
  module: {
    rules: [{
        test: /\.js$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
        exclude: /(node_modules)/,
        use: [{
          loader: 'babel-loader',
          //配置参数;
          options: {
            presets: ['es2015', 'react'],
            plugins: ['react-html-attrs']
          }
        }, ]
      },
      {
        test: /\.css$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]'
          }
        }]
      },
    ]
  },
};

• 在src/css下，创建一个footer.css，此css设置初衷是为了单独去渲染footer，希望footer.css不会污染全局，但通常情况下全局引用css是会污染全局的，内容如下

.miniFooter {
  background: #333333;
  color: #ffffff;
  padding-left: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.miniFooter h1 {
  font-size: 15px;
}

• 在footer.js下写

import React from 'react';

var footerCss = require("../../css/footer.css");//引入css

export default class CompomentFooter extends React.Component{
  render(){
    console.log(footerCss);
    return(
      <footer class={footerCss.miniFooter}>//通过var footerCss 选取footer.css中miniFooter
      <h1>这里是尾部</h1>
      </footer>
    );
  }
}

• 因为我们在打包时设置了localIdentName:'[path][name]__[local]--[hash:base64:5]'，这地方就是引用css的路径限制。

• 默认情况下，CSS 将所有的类名暴露到全局的选择器作用域中。样式可以在局部作用域中，避免全局作用域的样。详细🔎请查看官方文档官方文档式

• 所以在浏览器中console出了Object {miniFooter: "css-footer__miniFooter--2W_7G"}