Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to add less support in create-react-app related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have a harvest after reading this create-react-app article on how to add less support, let's take a look.

The first step is to expose webpack profile

For a project created with create-react-app, the webpack-related configuration file is not visible by default. We need to expose it using the following command:

Npm run eject

After running, we found that there was an extra config folder.

This allows you to modify the webpack-related configuration.

Step 2 add less

Use npm or yarn to install less and less-loader in the project root directory, and I use yarn here

Yarn add less less-loader

Step 3 modify the webpack configuration file

We need to modify the configuration files webpack.config.dev.js and webpack.config-prod.js

Test: / .css$/ changed to /\. (css | less) $/

Add less-loader to the use array configuration of test: / .css$/

{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% browsers, '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}],} This is the end of the article on "how to add less support in create-react-app" Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to add less support in create-react-app". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.