create-react-app使用less最详细说明 2019-04-13

描述创建步骤和官网一直，大家可以查看官网，下面简单列举下.创建项目npx create-react-app my-appcd my-app/eject出配置文件npm run eject或者yarn eject安装lessless和less-loader都要安装。less是支持less语法的，less-loader是webpack使用来编译less的。npm install less less-loader –save配置webpack.config.js修改config/webpack.config.js新增less配置变量const cssRegex = /.css$/;const cssModuleRegex = /.module.css$/;const sassRegex = /.(scss|sass)$/;const sassModuleRegex = /.module.(scss|sass)$/;const lessRegex = /.less$/; // 新增less配置const lessModuleRegex = /.module.less$/; // 新增less配置，这个其实不配置也行增加module下面rule规则，可以copy cssRegex或者sassRegex的配置。{ test: sassModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent }, “sass-loader” )}, { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1,// 值是1 modules: true, // 增加这个可以通过模块方式来访问css sourceMap: isEnvProduction && shouldUseSourceMap }, “less-loader” ), sideEffects: true}, // 这个测试删了也不影响{ test: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent }, “less-loader” )},// “file” loader makes sure those assets get served by WebpackDevServer.需要注意一下几个地方：1.lessRegex中importLoaders的值为1当然这个是2也能使用，但是它的值是根据lessRegex变量后面正则中匹配的loader数来决定的，比如const cssRegex = /.css$/只是处理css一种类型的文件，那应该就是1；const sassRegex = /.(scss|sass)$/;对应的是scss和sass两种类型，那就应该是2.2.lessRegex的use中增加modules配置modules可以不设置，不设置的话，less只能通过字符串名的方式使用，比如定义了一个.title,引用时import ‘./index.less’，使用时：<div className=“title”></div>如果需要通过模块的方式调用，则需要把modules设置成true，就可以通过styles.title方式使用了。import styles from ‘./index.less’,使用<div className={styles.title}></div>第二种配置方式可以不增加新的变量，把css的配置包含lessconst cssRegex = /.(css|less)$/; //增加lessconst cssModuleRegex = /.module.(css|less)$/;{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 2,// 改成2 modules: true,//使用模块方式访问样式 sourceMap: isEnvProduction && shouldUseSourceMap }, “less-loader” //增加loader ), // Don’t consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true}解决了你的问题，请点赞和收藏给点鼓励，有问题请留言。