react使用创建项目以及使用less的方法

最新推荐文章于 2024-09-11 20:56:23 发布

原创最新推荐文章于 2024-09-11 20:56:23 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #less #sass

前端专栏收录该内容

50 篇文章

订阅专栏

本文档详细介绍了如何在React项目中配置Less并进行使用。首先，通过切换npm镜像源加快安装速度，然后安装create-react-app和less、less-loader。接着，执行`npm run eject`暴露配置文件，找到webpack.config.js并添加Less的解析配置。通过这个过程，你的React项目就能支持Less样式文件了。

先切换 npm 的镜像源，安装快的可以直接执行下一步

 npm config set registry https://registry.npm.taobao.org
 npm install -g create-react-app
 create-react-app 你的项目名字

安装less

npm install less less-loader

安装好执行

npm run eject

找到webpack.config.js文件加上
在这里插入图片描述

// style files regexes
const cssRegex = /\.css\$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

找到文件中cssRegex 和 sassRegex的配置项加上
在这里插入图片描述

 // Less 解析配置
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true
      },
      "less-loader"
    ),
    sideEffects: true,
  },
   {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        "less-loader"
      ),
    },

这时我们的react项目就可以使用less了
感谢create-react-app 支持less踩坑的文章