React project import less stylesheet does not work. Create-react-app can’t support less after installing the react project. Webpack configurecss /less loader by default. The Loader configuration for Webpack needs to be changed.
1. Install the webPack package (the latest version of the package is not recommended)
2. Expose dependencies (Webpack, Babel, etc.) and runnpm run eject
After running, there are two more files, config and scripts, as shown below
Note: Before running NPM run eject, you must commit all of the project changes, otherwise it will fail. Second, this command is a one-way operation, and once executed, it is irreversible
3. Modify webpack.config.js to make less available
At the top of the add
const lessRegex = /\.less$/;
const lessModuleRegex = /\.less$/;
Copy the code
Find test: cssRegex and add the following code in front of it
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1.sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true}, {test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1.sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true.getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'),},Copy the code
4. Install less and less-loader
TypeError: this.getOptions is not a function Because the less-loader version is too high
5. An error was reported when running.options has an unknown property 'getLocalIdent'
Options passed an invalid parameter getLocalIdent, which is an argument to modules
Change it to the following figure