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: {
        loaders: [{
            test: /\.css$/,
            exclude: /node_modules/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.less?$/,
            loaders: [
                'style-loader',
                'css-loader',
                'less-loader?{"sourceMap":false}'
              ],
            exclude: node_modules/
        }
    }

2. css/less的按需加载

style-loader是把css样式文件添加到style标签内。按webpack官方文档说明配置css-loader和sytle-loader之后，模块加载时当前模块的css会被引入添加到style标签里面，插入到document.head中。切换到其他模块之后，虽然模块已经不在页面上，但模块的css还在head标签里面，这就可能会造成不用模块间样式的影响。

style-loader提供了方法可以控制样式的添加和移除。在模块载入时，通过require引入.useable.css文件，此时样式文件不会立即被添加到head中，而是在模块中调用use方法才会使样式生效。当模块移除时，通过unuse方法，可以移除样式文件。

可以在配置webpack.config.js时在loader加载器里配置关于.useable.css（或.useable.less）文件的配置。

    loaders: [{
            test: /\.css$/,
            exclude: /\.useable\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.useable\.css$/,
            exclude: /node_modules/,
            loader: "style-loader/useable!css-loader"
        }, {
            test: /\.less?$/,
            loaders: [
                'style-loader',
                'css-loader',
                'less-loader?{"sourceMap":false}'
              ],
            exclude: /\.useable\.less$/
        }, {
            test: /\.useable\.less$/,
            exclude: /node_modules/,
            loader: "style-loader/useable!css-loader!less-loader"
        },{
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel-loader?presets[]=env&presets[]=react'
        }
    ]

在组件中引用的时候

import style from './dataAnalyse.useable.less';

class dataAnalyse extends React.Component {
    constructor() {
        super();
        this.state = {

        };
    }
    componentWillMount() {
        style.use();
    }
    componentWillUnmount() {
        style.unuse();
    }
}

use和unuse调用的次数相同，每调用一次use，就要对应一次unuse调用。建议在componentWillMount和componentWillUnmount两个阶段调用。