CSS模塊化

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>這裏是尾部
</footer
);
}
}
由於咱們在打包時設置了localIdentName:'[path][name]__[local]--[hash:base64:5]'，這地方就是引用css的路徑限制。
默認狀況下，CSS 將全部的類名暴露到全局的選擇器做用域中。樣式能夠在局部做用域中，避免全局做用域的樣。詳細🔎請查看官方文檔官方文檔式
因此在瀏覽器中console出了Object {miniFooter: "css-footer__miniFooter--2W_7G"}