Create-react-app Project Add less configuration

Using the create-react-app project created by default is not supported less , the following steps to increase less the configuration

Exposing configuration Files

create-react-appThe generated project text, do not see the Webpack related configuration file, need to be exposed first, use the following command:

NPM Run Eject

Installation less-loaderAnd less

NPM Install Less-loader less--save-dev

Modify webpackConfiguration

modifying webpack.config.dev.js and webpack.config-prod.js configuring files

Change 1:

/\.css$/Instead /\.(css|less)$/, , modify the following:

Exclude: [  /\.html$/,  /\. ( JS|JSX) $/,  /\. ( css|less) $/,  /\.json$/,  /\.bmp$/,  /\.gif$/,  /\.jpe?g$/,  /\.png$/,],

　　

Change 2:

• test: /\.css$/Switch/\.(css|less)$/
• test: /\.css$/usearray configuration is increasedless-loader
• The following changes are followed:

• {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/2677Ident: ' 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    }  ],},

Create-react-app Project Add less configuration