create-react-app不支持less的解决方式

进入node_modules\react-scripts\config目录

修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可，注意loader是倒序执行的，less-loader需要先执行，所以写在规则的最后一个

webpack.config.dev.js修改后的配置如下

{

            test: /\.(css|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',

                    }),

                  ],

                },

              },

              require.resolve('less-loader')

            ],

          }

webpack.config.prod.js修改后的配置如下

{

            test: /\.(css|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',

                          }),

                        ],

                      },

                    },

                    require.resolve('less-loader')

                  ],

                },

                extractTextPluginOptions

              )

            ),

            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.

          }