关于在react中使用less的操作

1.原理：

由于使用create-react-app来创建的项目并未暴露webpack文件，而less操作需要webpack.config.dev.js和webpack.config.prod.js的配置，因此首先需要暴露出两个文件，

操作步骤：①npm run eject  ②引入less依赖：npm install less less-loader --save-dev

2.配置webpack文件,修改webpack.config.js如下：

① 加入以下两个引用：

//less

const lessRegex = /\.(less|less)$/;

const lessModuleRegex = /\.module\.(less|less)$/;

②在module下加入代码：

具体如下：

module: {

strictExportPresence: true,

rules: [

// Disable require.ensure as it's not a standard language feature.

{ parser: { requireEnsure: false } },

...省略

{

test: lessRegex,

exclude: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 2,

sourceMap: isEnvProduction && shouldUseSourceMap,

},

'less-loader'

),

// Don't consider CSS imports dead code even if the

// containing package claims to have no side effects.

// Remove this when webpack adds a warning or an error for this.

// See https://github.com/webpack/webpack/issues/6571

sideEffects: true,

},

{

test: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 2,

sourceMap: isEnvProduction && shouldUseSourceMap,

modules: true,

getLocalIdent: getCSSModuleLocalIdent,

},

'less-loader'

),

},

...省略

]

}

注意：坑的很，在下载项目之后直接使用npm run eject  ,要不然修改了内容在使用会出错