CSS Module 浅析

　背景

　　在多人项目中使用react 构建单页面应用过程中，出现切换不同路由时，页面布局受影响的问题，是由于css混乱而引起的。因为项目本身使用sass进行css的编写，全线转换成react-style的可能性较低，所以打算使用CSS Module进行逐渐升级。

　配置

　　在webpack.config.js中进行配置

 1 {
 2 　　test: /.scss$/,
 3    include: path.resolve(__dirname, 'src/routes'),
 4    loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]!sass-loader?sourceMap=true'
 5 },
 6 {
 7 　 test: /.scss$/,
 8    exclude: path.resolve(__dirname, 'src/routes'),
 9    loader: 'style-loader!css-loader!sass-loader?sourceMap=true'
10 },

因为是逐步升级所以仅在 src/routes目录下开启CSS Modules模式，localIdentName表示的是命名规则

注意：在webpack中对同一种文件的两种loader 如果出现目录覆盖的情况，是会报错的哟！

　使用

　　来看下demo

　　Page1.jsx

1 import React, { Component } from 'react';
2 import Styles from './page1.scss';
3 export default class Page1 extends Component {
4   render() {
5     return (
6       <div className={Styles.component}>aaa</div>
7     );
8   }
9 };

　　page1.scss

.component {
  background-color: lightblue;
  font-size: 30px;
}

　　page2.jsx

import React, { Component } from 'react';
import Styles from './page2.scss';

export default class Page1 extends Component {
  render() {
    return (
      <div className={Styles.component}>bbb</div>
    );
  }
};

　　page2.scss

.component {
  background-color: lightsalmon;
  font-size: 60px;
  border: 3px solid black;
}

可以看出两个页面的样式完全互相不影响啦！

未完待续。。