使用css-module防止组件重名污染

typescritp中，配置css-module

• 第一步：配置d.ts
• index.d.ts

declare module '*.less'

因为要把less当作模块引入，而ts检查，外部模块必须申明

• 第二步： 配置webpack.dev.config.js

 {
    test: /\.less$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            // 下面配置使用css-module
            options: {
                importLoaders:1,
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        },
        {
            loader: 'less-loader',
            options: {
                javascriptEnabled: true,
                globalVars: {
                    'testcolor': 'red',    // ten可以是ten，也可以是@ten，效果一样，下同
                },
                modifyVars: {
                    'primary-color': '#1DA57A'
                    }
            }
        },
        {
            loader: 'style-resources-loader',
            options: {
                patterns: path.resolve(__dirname,'../src/pages/count/global.less')
            }
        }
    ]
},

• 第三步：使用方式

import Style from './mermaid.less';

<h1 className={Style.test}>test</h1>

// 编译过后如下：
<h1 className={'mermaid__test___rFS9-'}>test</h1>

这样就可以防止变量重名污染

• mermadi.less

@grey-border-radius :{
    border: 1px solid red;
    border-radius: 2px;
};
.test{
    color:red;
    @grey-border-radius();
}