create-react-app 创建一个react项目中配置使用less

最新推荐文章于 2023-12-10 16:02:48 发布

qian_li_hui

最新推荐文章于 2023-12-10 16:02:48 发布

阅读量225

点赞数

文章标签： react.js less 前端

本文链接：https://blog.csdn.net/qian_li_hui/article/details/132496737

版权

本文介绍了如何在React项目中添加Less支持，包括创建新项目、修改Webpack配置以加载Less和less-loader，以及安装相关依赖。

摘要由CSDN通过智能技术生成

一、创建一个react项目
在文件夹中右键，在终端中打开，打开命令行窗口，输入如下命令，创建项目

 create-react-app project_name

创建完成后，根据提示,cd到项目文件夹下，npm start运行项目

cd project_name
npm start

二、react项目中配置使用less
react本身只支持sass，并不支持less所以安装less之前，必须修改 webpack.config.js 文件

创建完项目后，不要进行任何改动，直接执行如下命令

npm run eject

暴露出 config/webpack.config.js文件
增加如下配置

const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

	{
      test: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      }),
    },
    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders({ importLoaders: 3 }, "less-loader"),
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
          modifyVars: {
            "primary-color": "#1DA57A",
            "link-color": "#1DA57A",
            "border-radius-base": "2px",
          },
          javascriptEnabled: true,
        },
        "less-loader"
      ),
    },

安装 less 以及 less-loader ，运行下面代码