create-react-app 引入less与sass

最新推荐文章于 2025-05-30 09:00:57 发布

coding_forever

最新推荐文章于 2025-05-30 09:00:57 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： create-react-app css react 文章标签： create-react-app less sass react

本文链接：https://blog.youkuaiyun.com/liuyuqin1991/article/details/80626072

react 同时被 3 个专栏收录

7 篇文章

订阅专栏

create-react-app

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍如何在React项目中配置使用LESS和SASS预处理器，包括安装必要的依赖包、设置配置文件以及修改构建脚本等步骤。

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

引入less

1.安装react-app-rewired，react-app-rewire-less，babel-plugin-import

命令行：
- npm install react-app-rewired –only=dev
- npm install react-app-rewire-less –only=dev
- npm install babel-plugin-import –only=dev

2.根目录下创建config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#9F35FF" },
  })(config, env);
  return config;
};

PS：这里引用antd 组件，并且设置了主题样式颜色编码为#9F35FF

引入sass

1.安装node-sass-chokidar，npm-run-all

命令行：
- npm install –save node-sass-chokidar
- npm install –save npm-run-all

2.修改package.json

"scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",
     "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
}