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

This article mainly introduces the "React does not support less files how to solve" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "React does not support less files how to solve" article can help you solve the problem.

Method: 1, use "npm install less less-loader" to install less;2, modify "test:/\ .css $/" in "module.rules" to "test:/\. (css | less) $/"; 3, less can be supported after reboot.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What if React does not support less files?

Create-react-app is officially provided by React and the best way to build React single-page applications is recommended. However, less is not supported by default and manual integration is required:

1, less must be installed manually

Npm install less less-loader

2. Expose the webpack configuration file [npm run eject], modify the weppack.config.js file, and add less configuration

Find the loading rule for the css file in the module.rules node:

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

Add an object element {loader: require.resolve ('less-loader')} at the end of the use array.

After the modification is completed:

Const getStyleLoaders = (cssOptions, preProcessor) = > {const loaders = [isEnvDevelopment & & require.resolve ('style-loader'), isEnvProduction & & {loader: MiniCssExtractPlugin.loader, options: Object.assign ({}, shouldUseRelativeAssetPaths? {publicPath:'.. /'}: undefined),}, {loader: require.resolve ('css-loader') Options: cssOptions,}, {/ / Options for PostCSS as we reference these options twice / / Adds vendor prefixing based on your specified browser support in / / package.json loader: require.resolve ('postcss-loader'), options: {/ / Necessary for external CSS imports to work / / https://github.com/facebook/create-react-app/issues/2677 ident:' postcss' Plugins: () = > require ('postcss-flexbugs-fixes'), require (' postcss-preset-env') ({autoprefixer: {flexbox: 'no-2009',}, stage: 3,}),], sourceMap: isEnvProduction? ShouldUseSourceMap: isEnvDevelopment,},}, {loader: require.resolve ('less-loader') / / compiles Less to CSS}] .filter (Boolean); if (preProcessor) {loaders.push ({loader: require.resolve (preProcessor), options: {sourceMap: isEnvProduction? ShouldUseSourceMap: isEnvDevelopment,},});} return loaders;}

You need to restart the project to see that the less style is available.

This is the end of the introduction on "how to solve the problem that React does not support less files". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.