react配置less或者sass

react如何配置less(sass与less配置的方法基本一致，如果还是不会的朋友可以私信我)

接下来笔者会一步一步的跟朋友们一起去做配置

1. 生成react项目，

create-react-app <你的项目名>

2. 可以将src目录中的文件删的只剩index.js
   
   index.js内容需要删减

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

3. 创建一个App.js（此时查看是否能运行，显示App.js的内容）
   App.js文件的内容：

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>
                我是最帅的吴小迪啊
            </div>
        )
    }
}

此时发现内容以及展示出来了。
4. 创建App.less，并将文件引入到App.js中(import ‘./App.less’)


结果发现我们定义的样式并没有起作用。
5. 安装less包

npm i less less-loader -S

安装完毕之后先不要急着启动，现在启动也是没有用的，先要进行配置。
6. 进行less文件的配置，找到config中的dev文件中的CSS的配置

可以通过ctrl + F然后输入css快速找到其所在位置

7. 复制一份到css配置文件到下方，进行修改
为了编码少复制了花括号导致嵌套错误，可以将鼠标移动到左侧的位置会出现这个减号的标识，可以点击笔者用箭头标注的那个减号。

然后可以选中此内容，进行ctrl+C，如果你是VScode编辑器可以直接ctrl+d加↓方向键就会直接复制一份到下方，关于VScode的快捷键可以关注笔者的另外一篇博客。

将刚刚复制的内容改成笔者下面的代码样子。

{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      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',
          }),
        ],
      },
    },
    {
      loader: require.resolve('less-loader'),
      options: {
        javascriptEnabled:true   //如果你要使用antd的话就要加上此配置，否则使用antd的时候会报错
      },
    },
  ],
},

8. 配置完选项，需要重启项目才能生效
   重新npm start一下你就会发现我们的less语法以及起作用了。
   
9. 如果要发布到线上了，那么在之前要在config的webpack.config.prod.js中的内容进行修改，将下面的新增内容放到test: /\.css$/的那个模块下面。新增内容如下：

{
  test: /\.less$/,
   loader: ExtractTextPlugin.extract(
       Object.assign(
           {
             fallback: {
               loader: require.resolve('style-loader'),
               options: {
                 hmr: false,
               },
             },
             use: [
               {
                 loader: require.resolve('css-loader'),
                 options: {
                   importLoaders: 1,
                   minimize: true,
                   sourceMap: shouldUseSourceMap,
                 },
               },
               {
                 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',
                     }),
                   ],
                 },
               },
               {
                 loader: require.resolve('less-loader'),
                 options: {
                   importLoaders: 1,
                   minimize: true,
                   sourceMap: shouldUseSourceMap,
                 },
               }
             ],
           },
           extractTextPluginOptions
       )
   ),
   // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
 },

11. npm run build检查是否会报错

PS：新版本的react可能与上面的配置方法不一致，请随时查看官方变动！
PS：新版本的react可能与上面的配置方法不一致，请随时查看官方变动！
PS：新版本的react可能与上面的配置方法不一致，请随时查看官方变动！