最新create-react-app增加sass or less loader【和旧版略有不同】

最新推荐文章于 2021-12-22 16:35:15 发布

$(薛定谔的喵)

最新推荐文章于 2021-12-22 16:35:15 发布

阅读量817

点赞数

分类专栏： React 文章标签：最新create-react-app增加sass or less lo react脚手架安装sass、less、scss

本文链接：https://blog.youkuaiyun.com/Chad97/article/details/98851028

版权

React 专栏收录该内容

23 篇文章

订阅专栏

这篇博客记录了如何在最新版本的create-react-app中添加Sass或Less支持，包括保留配置文件、修改样式文件正则表达式以及解决暴露配置文件后可能出现的启动报错问题。根据更新内容，React App 2.0+版本已经内建对TypeScript、Sass和CSS模块的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缘起

做个记录

npm run eject 保留配置文件
找到webpack.config.js

样式文件正则表达式

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

在sassRegex 和sassRegex 中增加

然后找到

 {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader',
                'less-loader'
              ),
            },

在里面增加你的loader

yarn add sass-loader node-sass --save-dev

补充如果在暴露配置文件之后启动报错删除moudel 重新 yan 安装一下

更新

如果使用的是react-app 2.0+ 无需弹出配置文件 ,支持TypeScript，Sass，CSS模块等

NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting:
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html