Add sass and less support in the new version of react respectively. Note that the project is created with the create react app scaffold tool.
Add sass support
Adding sass support is very simple. You only need to execute the following command to install node sass. If it does not take effect, please restart the project.
npm i node-sass --save
Add less support
Adding less support is a little bit troublesome, because the support for sass has been configured in the create react app scaffold, but there is no configuration for less. We need to manually configure it. Please follow the steps below:
Install less and less loader
npm i less less-loader --save
Release eject
npm run eject
This command will produce the config folder in the current directory
Modify profile
Open the / config/webpack.config.js file and locate the following code:
// Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'sass-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.
In the above code, there is no original code, just to highlight this position. You can see that sass has been configured, replace * with the following code, and then restart.
// Add less loader { test: /\.less$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('less-loader') // compiles Less to CSS } ], },
Above.