react组件引用less样式失效问题记录

在react项目中使用了less来预处理css,但是在项目中却遇到了引用样式不生效的问题，现记录如下：
页面代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import  './index.less';

class PriceProtection extends Component {
  render() {
      return (
          <div className="price_protection_box">
              <div className="price_protection_form_box">
                  <div className="title">
                      标题
                  </div>
              </div>
          </div>
      )
  }
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = {
  
}

export default connect(mapStateToProps, mapDispatchToProps)(PriceProtection)

样式代码

.price_protection_form_box{
     background: rgba(253,253,253,1);
     border: 1px solid rgba(221,224,227,1);
     border-radius: 2px 6px 6px 6px;
     .title {
         height: 37px;
         background: rgba(246,248,250,1);
         box-shadow: 0px 1px 0px 0px rgba(237,239,242,1);
         position: relative;
     }
 }
.price_protection_box {
     padding-top: 16px;
     margin: 0;
 }

执行以上代码，发现css样式并未生效，F12控制台，发现styles中相关的class都没有：

以为是自己引用错误，不断调试，后面发现其实样式已引入，但相关的class 名在less预处理中编译时已重命名了：

而页面中dom的class名并没有变：

解决方案：

因为我们在项目中使用了css-loader,自带的css modules会把所有类名编译为哈希字符串，所以有下边两种方案解决
一 按照css module 规则
1、修改引入方式

import  './index.less';
// 修改为
 import style from './index.less';

2、组件中使用

class PriceProtection extends Component {
   render() {
       return (
           <div className="price_protection_box">
               <div className="price_protection_form_box"}>
                   <div className="title">
                       标题
                   </div>
               </div>
           </div>            
       )
   }
}
//修改为
class PriceProtection extends Component {
   render() {
       return (
           <div className={style.price_protection_box}>
               <div className={style.price_protection_form_box}>
                   <div className={style.title}>
                       标题
                   </div>
               </div>
           </div>            
       )
   }
}

二 css modules的全局作用域
CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串，因此我们可以在less文件中，所有内容外用:global语法包裹住：

:global {
   .price_protection_form_box{
       background: rgba(253,253,253,1);
       border: 1px solid rgba(221,224,227,1);
       border-radius: 2px 6px 6px 6px;
       .title {
           height: 37px;
           background: rgba(246,248,250,1);
           box-shadow: 0px 1px 0px 0px rgba(237,239,242,1);
           position: relative;
       }
   }
.price_protection_box {
       padding-top: 16px;
       margin: 0;
   }
}

页面中就可以直接使用自定义类名了
less中文文档地址：http://lesscss.cn/
CSS Modules 用法教程：http://www.ruanyifeng.com/blog/2016/06/css_modules.html