React+webpack+Less 组件样式覆盖优化

github代码：https://github.com/liuniansilence/react-webpack-frame

在使用webpack编译代码的时候，会用到一些样式的加载器，例如css-loader，style-loader。如果有用到less或者sass也会有相应的加载器，其中：

• css-loader 是处理css文件中的url()等
• style-loader 将css插入到页面的style标签
• less-loader 是将less文件编译成css

1. less的使用

在编译样式文件的时候，经常会遇到一个问题。就是子组件的样式，会影响到外部公共组件的样式。常规情况下，我们会约定子组件内部的样式命名方式，通过添加前缀的方式来避免样式覆盖。

对于页面繁多的时候，这个方法效率很低，效果也不好。那么我们可以通过less这样的库来编译脚本。less有个好处是可以将样式文件的编写函数化，可以编写嵌套的css。详情参见less的文档http://less.bootcss.com/usage/。

webpack在编译less文件时需要less-loader来解译.less文件。在配置加载加载器的时候：

    module: {