react 项目模板搭建（1）—— 加入 less 、 sass

原创

已于 2023-06-02 15:44:00 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#less #react.js

于 2021-09-10 11:12:24 首次发布

本文介绍了如何在基于Create-React-App的项目中配置Sass和Less。首先，通过npx create-react-app创建项目基础。接着，若需自定义Webpack配置，可以使用eject命令，但注意此操作不可逆。对于Sass，项目已内置支持，只需安装node-sass。对于Less，需要安装less和less-loader，并在Webpack配置中添加匹配规则。在处理less时，可能需要降低sass-loader版本以避免错误。此外，文章还提供了关于配置less-loader的详细步骤，包括全局变量设置和引入文件的处理。

一、使用脚手架搭建项目基础

npx create-react-app my-app
创建后会得到一个基础的 react 项目文件，如果不需要加其他配置，可以直接使用

二、Create-React-App的Webpack配置

npm run eject
如果需要增加特殊配置，可以在根目录下使用这个命令，工具会给出提示，提示eject为不可恢复操作，输入y或者y开头的单词，即可进行eject。
eject后，会在目录下发现几个新增的目录 config，script。
script的内容为脚手架自己生成的，不用动，webpack 文件在 config 文件夹里，打开 webpack.config.js 文件，就能看的眼花缭乱又熟悉的 webpack 配置
请添加图片描述

三、使用 sass 或 less

sass： react 里默认已经配置了 sass, 你直接写sass,运行会发现报Cannot find module 'sass，其实是create-react-app只安装了sass-loader,没有安装node-sass依赖，即npm install node-sass --save-dev 就能编译

less：如果需要使用 less ，安装 less 和 less-loader ，yarn add less less-loader ，然后需要在两个位置进行修改，

一个在正则位置 css 后加上 less，

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

const lessRegex = /\.less$

最低0.47元/天解锁文章