create-react-app如何使用less/sass和react-css-modules?

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