creat-react-apにlessサポートを追加した実現

前言
creat-react-ap足場でプロジェクトを作成した後、デフォルトではlessはサポートされていません。したがって、私たちは手動で追加する必要があります。
ステップ目の露出webpackプロファイル
creat-react-apを使って作成したプロジェクトは、デフォルトではwebpackに関する設定ファイルが見えません。私たちはそれを暴露する必要があります。次のコマンドを使えばいいです。

npm run eject

実行後、私達はもう一つのconfigフォルダを発見しました。
これでwebpack関連の配置を変更できます。
Step 2 lessを追加します
プロジェクトのルートディレクトリでnpmまたはyarnを使ってlessとless-loaderをインストールします。ここで使っているのはyarnです。

yarn add less less-loader

ステップ3でwebpackプロファイルを変更します。
私達はwebpack.co nfig.dev.jsとwebpack.co.nfig-prod.jsの二つの構成ファイルを修正したいです。

test:/.css$/を/\.(css 12464 less)$

test:/.cssドル/のuse配列構成は、less-loader

を追加します。

{
 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',
   }),
  ],
  },
 },
 {
  loader: require.resolve('less-loader') // compiles Less to CSS
 }
 ],
},

終了
プロジェクトを再実行して、lessを導入したら、もう使えますか？
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。