We know , stay vue In the document we use scoped To proceed css Modular development , Make their styles unaffected by each other .
And in react We found that css Style settings also have the problem of interaction .( for example : Change global style , The set style has no effect , Overwritten by styles elsewhere ...)
solve :
1,creat-react-app: solve css Conflict issues ：
2,npm run eject
3, Open profile webpack.config.js
4, find css-loader to configure （ Probably in 112 Line left and right ）
// add to { importLoaders:1, modules:true } // reach css-loader in
The contents are as follows ：
5,npm start
6, establish css file
7, stay js Intra component reference css file import styles from '../css/style.css';
8, Use in labels <div className = {styles.div}> have a look React Import and Componet Import </div>
9, Can be div Tag generated hash value class value
/* Modular style , Class name or id Name in DOM Is overridden as hash value , And local() Consistent package effect , Are modular */ .look{ color:blue; }
/* Global definition ,:global() Class name or rule of the package id, Class name or rule id Name will not become hash value , Can be referenced globally */ :global(.test) {
font-style:italic; color:aqua; } :global(.active) { color: red; font-size:
30px; } /* 1, Global style + New style className = {styles.p +' test'} * be careful ：test There is a space before 2,
className = {[styles.p,'test'].join(' ')} */
effect :
Self regulation ：
1, Imported third-party style sheets , Most of them .css ending , No need to enable modularity
2, Own stylesheet , All with .scss or .less ending , Enable modularity
Technology
Daily Recommendation