react 腳手架裏如何使用less？

安裝完react腳手架以後，是不支持less的，但是我們可以自己配置，react腳手架沒有暴露webpack.config.js，那他就沒有嗎 開玩笑，那他怎麼配置，首先我們：

 

第一步：找到node_modules/react-scripts/config/webpack.config.dev、webpack.config.prod

這個react-scripts就是配置文件啦，看到如下所示我們每次運行文件的時候 都會觸發這個文件

第二步：進入到文件 cd node_modules/react-scripts

安裝less包依賴 npm install --save less less-loader

第三步：更改webpack.config.dev、webpack.config.prod這兩個配置文件，更改的內容一樣，這裏就拿webpack.config.dev師範一下

爲了讓你們看的更詳細且能複製我把代碼拿過來一段
 

{
    // "oneOf" will traverse all following loaders until one will
    // match the requirements. When no loader matches it will fall
    // back to the "file" loader at the end of the loader list.
    oneOf: [
      // "url" loader works like "file" loader except that it embeds assets
      // smaller than specified limit in bytes as data URLs to avoid requests.
      // A missing `test` is equivalent to a match.
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      // Process JS with Babel.
      {
        test: /\.(js|jsx|mjs)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          // @remove-on-eject-begin
          babelrc: false,
          presets: [require.resolve('babel-preset-react-app')],
          // @remove-on-eject-end
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
        },
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        //更改第一處
        test: /\.(css|less)$/,
        use: [
          require.resolve('style-loader'),
          // require.resolve('less-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'),
          },
        ],
      },
      // "file" loader makes sure those assets get served by WebpackDevServer.
      // When you `import` an asset, you get its (virtual) filename.
      // In production, they would get copied to the `build` folder.
      // This loader doesn't use a "test" so it will catch all modules
      // that fall through the other loaders.
      {
        // Exclude `js` files to keep "css" loader working as it injects
        // its runtime that would otherwise processed through "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpacks internal loaders.
        //第三處 更改
        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.(css|less)$/],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
    ],
},

怎麼樣解決了嗎，如果有什麼問題或者更好的建議可以評論到下方，我們一起討論