• 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...

你可能感兴趣的文章

载入中...
Planets
趁你还年轻 趁你还年轻

1.2k 声望

发布于专栏

趁你还年轻,做个优秀的前端工程师

分享在工作和学习过程中的,对于前端技术的一些实践和思考。 一方面,记录技术成长过程中踩到的坑,启示他人。 另一方面,也开辟一条和众多前端开发者思想碰撞的通道,汲取智慧。 之前在简书有写文章:http://www.jianshu.com/u/ff2903c0af37,记录入行1年的成长。 在SF专栏,努力提升文章质量,且只对前端技术进行探索。 还是那句话,努力成为优秀的前端工程师!

10 人关注