第一种 : React 使用 sass

1. 安装 node-sass

yarn add node-sass 

or
// 如果安装失败
// 命令行输入,配置node-sass 的全局镜像
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
/// 配置完之后 再次输入 yarn add node-sass

2. 创建一个 .scss 文件, 引入即可

import './index.scss'

第二种 : React 使用 less

1. 导出 webpack 配置

• 执行命令 : yarn eject
• 保存到本地仓库 : git add . 和 git commit -m 信息

2. 安装依赖包

yarn add less less-loader 

3. 仿 sass 添加一个 less 正则

const cssRegex = /\.(css)$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
// ************** 新加 less *****************
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
// ************** 新加 less *****************

4. 仿 sass 添加一个 less 配置

// 之前的 sass 的配置
{
  test: sassRegex,
  ....
},
{
  test: sassModuleRegex,
  ....
},
// 新加的 less 配置
{
  test: lessRegex,  // 新加
  exclude: lessModuleRegex,  // 新加
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap
    },
    'less-loader'   // 新加
  ),
  sideEffects: true
},
{
  test: lessModuleRegex,  // 新加
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent
      }
    },
    'less-loader'    // 新加
  )
},

5. 创建一个 .less 文件 , 引入即可

链接地址 https://github.com/mawenxing/react-sass-less