第一种 : React 使用 sass
1. 安装 node-sass
yarn add node-sass
or
// 如果安装失败
// 命令行输入,配置node-sass 的全局镜像
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
/// 配置完之后 再次输入 yarn add node-sass
2. 创建一个 .scss
文件, 引入即可
import './index.scss'
第二种 : React 使用 less
1. 导出 webpack 配置
- 执行命令 :
yarn eject
- 保存到本地仓库 :
git add . 和 git commit -m 信息
2. 安装依赖包
yarn add less less-loader
3. 仿 sass 添加一个 less 正则
const cssRegex = /\.(css)$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
// ************** 新加 less *****************
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
// ************** 新加 less *****************
4. 仿 sass 添加一个 less 配置
// 之前的 sass 的配置
{
test: sassRegex,
....
},
{
test: sassModuleRegex,
....
},
// 新加的 less 配置
{
test: lessRegex, // 新加
exclude: lessModuleRegex, // 新加
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap
},
'less-loader' // 新加
),
sideEffects: true
},
{
test: lessModuleRegex, // 新加
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
},
'less-loader' // 新加
)
},
5. 创建一个 .less 文件 , 引入即可
链接地址 https://github.com/mawenxing/react-sass-less