一、简介
React项目开发中可能会使用到Less、Sass等样式预处理器，create-react-app创建的React项目，默认就是支持Sass的。如果需要使用Less则需要额外手动安装配置。
二、方式一：webpack.config.js 配置（不推荐）
- 由于需要暴露隐藏的配置文件，不利于项目升级，不推荐使用。
- 安装 less 与 less-loader
$ npm i less less-loader -S # 或 $ yarn add less less-loader -S
- 暴露
webpack配置文件。（提示：该操作不可逆，长远考虑不推荐使用该方案）
$ npm run eject
- 修改
webpack.config.js配置文件
首先要找到以下代码，可以使用 VSCode 查询功能直接找到，搜索内容为 sass:
// style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/;
仿照格式，在下面配置 less:
// 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$/;
继续向下搜索 sass，能够找到以下代码:
... { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { mode: 'icss', }, }, 'sass-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { mode: 'local', getLocalIdent: getCSSModuleLocalIdent, }, }, 'sass-loader' ), }, ...
和之前配置一样，仿照 sass 配置，添加 less 配置:
... // config less { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' ), }, ...
- 到这就完成了
webpack.config.js配置less，重启项目则可使用less样式了。
三、方式二：craco.config.js 配置（推荐）
- 安装
craco
$ npm i @craco/craco # 或 $ yarn add @craco/craco
- 安装
less与craco-less
$ npm i less craco-less # 或 $ yarn add less craco-less
- 修改
package.json文件
"scripts": { // "start": "react-scripts start", // "build": "react-scripts build", // "test": "react-scripts test", "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }
- 补充：下载装饰器（可选，看情况使用）
$ npm i @babel/plugin-proposal-decorators -S # 或 $ yarn add @babel/plugin-proposal-decorators -S
- 根目录创建，并配置
craco.config.js文件
const path = require('path') const lessPlugin = require("craco-less"); module.exports = { // 插件 plugins: [ { plugin: lessPlugin, options: { lessLoaderOptions: { lessOptions: { // antdv 主题之类的配置 // modifyVars: { "@primary-color": "#1DA57A" }, javascriptEnabled: true } } } } ], // 如果没安装，可以删除 babel: { plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]] } }
