- create-react-app如何使用less?
- create-react-app如何使用sass?
- create-react-app如何使用react-css-modules?
Thanks @pengzeya
1.create-react-app如何使用less?
安装less-watch-compiler到开发依赖。
npm i less-watch-compiler --save-dev
添加scripts
"scripts": {
"build-css": "less-watch-compiler --run-once --main-file=index.less src/less src/css",
"watch-css": "npm run build-css && less-watch-compiler --main-file=index.less src/less src/css"
}
运行命令
npm run watch-css
运行结果
创建css目录并生成编译后的index.css文件
src/less/index.less → src/css/index.css
程序运行起来后,会监控对应目录下的.less文件,热更新到css目录下。
2.create-react-app如何使用sass?
安装node-sass-chokidar到依赖
npm install --save node-sass-chokidar
添加scripts
"build-css": "node-sass-chokidar src/sass -o src/css",
"watch-css": "npm run build-css && node-sass-chokidar src/sass -o src/css --watch --recursive",
运行命令
npm run watch-css
运行结果
创建css目录并生成编译后的index.css文件
src/sass/index.scss → src/css/index.css
程序运行起来后,会监控对应目录下的.scss文件,热更新到css目录下。
3.create-react-app如何使用react-css-modules?
暴露出配置文件:
npm run eject
运行eject命令后,CRA会自动把wepack中与css-modules相关的依赖为我们准备好,无需新增多余的依赖。
修改config/webpack.config.dev.js:
// 修改前
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
// 修改后
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
},
},
修改config/webpack.config.prod.js:
// 修改前
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: true,
},
},
// 修改后
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
minimize: true,
sourceMap: true,
},
},
代码变化:
引入CSS Modules之前:
import React, { Component } from 'react';
import logo from './logo.svg';
import './foo.css';
class App extends Component {
render() {
return (
<div className="bar">
</div>
);
}
}
export default App;
引入CSS Modules之后:
import React, { Component } from 'react';
import logo from './logo.svg';
import foo from './foo.css';
class App extends Component {
render() {
return (
<div className={foo.bar}>
</div>
);
}
}
export default App;
添加css-modules之前:
.bar{
display: block;
background: yellow;
}
添加css-modules之后:
.foo__bar__1t6eA{
display: block;
background: yellow;
}
运行结果
.bar → foo__bar__1t6eA
注意事项:
- 将import进来的'./SomeComponent.css'分配给一个本地常量,例如,import foo from './foo.css';
- 在JSX中将className替换成的形式{styles.myClass},例如,className={styles.myClass}.
- 需要修改CSS文件和JSX中的class名。因为CSS Modules不允许"-"出现在类名中,有过开发经验的朋友都知道,正则中有"word"与"none-word"之分,word包括0~9,a~z以及下划线。而"-"不属于单词,因此CSS Modules不支持。例如我们需要将.Foo.bar修改为.bar,某些方面也简化了我们的代码。使用CSS Modules之后,我们就不需要再使用BEM之类的CSS规范。
参考:
https://github.com/facebook/c...
https://github.com/facebook/c...
https://medium.com/nulogy/how...
期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:
- SegmentFault技术圈:ES新规范语法糖
- SegmentFault专栏:趁你还年轻,做个优秀的前端工程师
- 知乎专栏:趁你还年轻,做个优秀的前端工程师
- Github博客: 趁你还年轻233的个人博客
- 前端开发QQ群:660634678
- 微信公众号: 人兽鬼 / excellent_developers
努力成为优秀前端工程师!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。