使用CSS预编译工具其实都不陌生了，如何在React项目中使用像Sass、Less这样的CSS预编译工具呢？这里我们就需要安装webpack的sass-loader或者less-loader了。
下面我们来进行安装和配置：

安装loader

安装sass-loader或less-loader

1
$ yarn add sass-loader  // 或 yarn add less-loader

安装sass-loader需要依赖node-sass，而安装less-loader需要依赖less。如果出现安装失败的情况，可以试试翻墙出去。

安装完毕后，我们来进行webpack的配置。

配置loader

create-react-app默认给我们安装好了css的一些工具，比如autoprefixer、postcss等。而且webpack无论是development或是production环境，css都有处理的。所以，我们将webpack.config.dev.js和webpack.config.prod.js里面的css loader配置项抽离出来。
在config目录下面新建一个postcss.config.js文件，然后把postcss plugins相关内容copy到postcss.config.js文件内，注意依赖包的引入。
完了之后，我们export出去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const autoprefixer = require('autoprefixer');
const flexBugs = require('postcss-flexbugs-fixes');

let postcssConfig = [
  flexBugs,
  autoprefixer({
    browsers: [
      '>1%',
      'last 4 versions',
      'Firefox ESR',
      'not ie < 9', // React doesn't support IE8 anyway
    ],
    flexbox: 'no-2009',
  }),
];

module.exports = postcssConfig;

然后修改webpack.config.dev.js和webpack.config.prod.js对应css loader中 postcss插件配置的地方。
之后，我们再把安装好的sass-loader或less-loader配置到css loader的地方，并修改匹配文件后缀为scss或less。可以看如下图：
loader

修改css后缀为scss或less

配置好了loader后，我们再把项目里面的.css文件修改成后缀为.scss或.less，然后用 yarn start 启动项目，在浏览器里面我们可以看下我们的配置是否起作用了。