css module 支持less,webpack结合less开启css modules，实现组件之间的 less，css互不干扰...

开启less的modules，关闭css的modules

{

test: /\.less$/,

use: [

require.resolve('style-loader'),

{

loader: require.resolve('css-loader'),

options: {

modules: true,//开启

localIndexName:"[name]__[local]___[hash:base64:5]"//配置class的名字

},

},

{

loader: require.resolve('less-loader'), // compiles Less to CSS

},

{

loader: require.resolve('postcss-loader'),

options: {

// Necessary for external CSS imports to work

// https://github.com/facebookincubator/create-react-app/issues/2677

ident: 'postcss',

plugins: () => [

require('postcss-flexbugs-fixes'),

autoprefixer({

browsers: [

'>1%',

'last 4 versions',

'Firefox ESR',

'not ie < 9', // React doesn't support IE8 anyway

],

flexbox: 'no-2009',

}),

],

},

}

],

},

{

test: /\.css$/,

use: [

require.resolve('style-loader'),

{

loader: require.resolve('css-loader'),

options: {

modules: false,//关闭

},

},

{

loader: require.resolve('postcss-loader'),

options: {

// Necessary for external CSS imports to work

// https://github.com/facebookincubator/create-react-app/issues/2677

ident: 'postcss',

plugins: () => [

require('postcss-flexbugs-fixes'),

autoprefixer({

browsers: [

'>1%',

'last 4 versions',

'Firefox ESR',

'not ie < 9', // React doesn't support IE8 anyway

],

flexbox: 'no-2009',

}),

],

},

}

],

},