注意:1. 使用脚手架 create-react-app 创建的 react项目,默认使用了webpack ==>> 请注意webpack的版本
2. create-react-app 创建的 react项目,webpack配置默认是隐藏的,如果需要查看或者修改,请使用 npm run eject 命令,
3. 如果webpack是4.x的版本,配置文件 webpack.config.js (一个文件),否则会有 webpack.config.dev.js 和 webpack.config.prod.js 两个文件
一、使用 Sass ==>> 简单
首先,看一下webpack.config.js中对css的默认配置:
create-react-app 创建的 react项目,默认就是支持Sass的,使用只需要安装一下 node-sass 这个包即可使用
命令: npm install node-sass -D
测试Sass:
1)创建文件 src/test.scss ==>> 后缀名:.scss
$themeColor: #17B3A3;
p{
background: $themeColor;
span{
color: #0f0
}
}
2)在App.js 中引入使用
import React from 'react';
import './test.scss'
function App() {
return (
<div className="App">
<header className="App-header">
<p className='box'>
React.
<span>你好</span>
</p>
</header>
</div>
);
}
export default App;
3)效果
二、使用Less ==>> 相对复杂
1. 安装依赖包:cnpm i --save-dev less less-loader (less 、less-loader两个包)
2. 修改webpack配置 ==>> webpack版本4.x以上,才只用改webpack.config.js一个文件,否则需要改两个哦
2.1 在 webpack.config.js 中 "style files regexes" (40行) 添加 less ==》即照着Sass改一份Less的
增加的代码如下:
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// 或者改成这样
// const lessRegex = /\.(scss|less)$/;
// const lessModuleRegex = /\.module\.(scss|less)$/;
2.2 增加 Less 编译配置
增加代码如下:==》即照着Sass改一份Less的
// ====================== 第二处 ==================
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-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: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
这样,Less的配置就完成了
测试Less:
1)创建文件 src/test.less ==>> 后缀名:.less
$themeColor: #17B3A3;
p{
background: @themeColor; //使用Less或者Sass是注意结束的 ;
span{
color: #fcc;
}
}
2)在App.js 中引入使用
import React from 'react';
import './test.scss'
function App() {
return (
<div className="App">
<header className="App-header">
<p className='box'>
React.
<span>你好</span>
</p>
</header>
</div>
);
}
export default App;
3)效果
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!