CSS Module 淺析

　背景

　　在多人項目中使用react 構建單頁面應用過程中，出現切換不同路由時，頁面布局受影響的問題，是由於css混亂而引起的。因為項目本身使用sass進行css的編寫，全線轉換成react-style的可能性較低，所以打算使用CSS Module進行逐漸升級。

　配置

　　在webpack.config.js中進行配置

{
　　test: /\.scss$/,
   include: path.resolve(__dirname, 'src/routes'),
   loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]!sass-loader?sourceMap=true'
},
{
　 test: /\.scss$/,
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

import React, { Component } from 'react';
import Styles from './page1.scss';
export default class Page1 extends Component {
  render() {
    return (
      <div className={Styles.component}>aaa</div>
    );
  }
};

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

 

可以看出兩個頁面的樣式完全互相不影響啦！

未完待續。。