在使用creacte-react-app 腳手架搭建的專案中，並不支援less、scss、sass等樣式前處理器。在專案中如果需要使用樣式預處理，只需要簡單的三步就可以了。

1. 使用npm安裝樣式預處理包（npm install less –save-dev）
2. 找到webpack.config.prod和webpack.config.dev進行依賴配置
3. 重啟服務

1. 下載依賴包

2. 配置檔案

需要注意的是creacte-react-app搭建的腳手架，webpack的配置是整合在react-script檔案中，所以在配置目錄中沒有config的資料夾，可以通過編輯器的查詢來查詢webpack.config.prod和webpack.config.dev。

直接在node_modules檔案下，搜尋關鍵字就可以找到了。

找到webpack.config.prod和webpack.config.dev後，在配置程式碼中，找到test對應的css配置，改成與圖中配置一樣即可，最後在loader json中配置好less所需程式碼。

注意：兩個檔案的配置是一樣的，都必須修改，不然會報錯。

最後貼上已配置好的檔案程式碼，供參考：

{
     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',
                   }),
                 ],
               },
             },
             {
               loader: require.resolve('less-loader'),
             }
           ],
         },
         extractTextPluginOptions
       )
     ),
     // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
   },