通过Create React App创建的react单页面应用中（创建方式见上一篇文章），我们可以看到，是使用如下方式引入css文件的

如一个组件Test.js，通过 import "./Test.css"，将css样式引入，而平时比较习惯使用less，因此找了两种方式实现引入less文件

import React, { Component } from 'react';

import './Test.css';

class Test extends Component{

    render(){
        return (
            <div className="toast">这是第一个测试组件，{this.props.message}</div>
        )
    }
}

export default Test

通过webstorm的文件监听（File Watchers）

思路是通过webstorm监听less文件，然后自动在less文件所在目录生成同名的css文件，组件中引入时，还是引入css文件

点击WebStorm-Preferences-Tools-File Watchers

点击+号，选择less即可

但是感觉这种方式不是很好，多一个文件，因此还是考虑直接在组件中引入less

组件中直接引入less

1.安装less相关依赖

npm install less less-loader --save-dev

2.修改webpack文件配置

在node_modules/react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件

更改如下3处

// 在module中做了三处修改
  // 第一处是找到 `test: /\.css$/` 将其改为  `test: /\.(css|less)$/`
  // 第二处是增加 `less-loader`的配置
  // 第三处是在exclude属性中增加 `/\.(css|less)$/` 
  // 具体修改如下
  module: {
    ...
    {      
      // test: /\.css$/  第一处 ，修改
      test: /\.(css|less)$/,      
      use: [        
        require.resolve('style-loader'),
        ...        
        // 第二处，增加
        {          
           loader: require.resolve('less-loader')
        }
      ]
    },
    {      
      exclude: [        /\.(js|jsx|mjs)$/, 
        /\.html$/, 
        /\.json$/,        
        // 第三处，增加如下内容
        /\.(css|less)$/,
      ]
    }
  }

好了，现在可以在组件中直接引用less文件了

import React, { Component } from 'react';

import './Test.less'; //直接引入less文件

class Test extends Component{

    render(){
        return (
            <div className="toast">这是第一个测试组件，{this.props.message}</div>
        )
    }
}

export default Test