讓create-react-app支持sass，less

用create-react-app 建立的項目不支持sass和less，須要手動配置

npm install node-sass sass-loader --save

而後在config/webpack.config.js中添加如下代碼，紅色框的是新添加的代碼：

 

 

項目是採用create-react-app 搭建的腳手架工程如何應用CSS Module

 

1.在命令行運行 npm run eject 命令
2.運行完成以後，打開 config 目錄下的 webpack.config.js 文件，找到 test: cssRegex 這一行
3.在 use 屬性執行的方法中添加 modules: true，以下圖：

 

 

 

CSS Module

CSS模塊就是全部的類名都只有局部做用域的CSS文件。CSS Modules既不是官方標準，也不是瀏覽器的特性，而是在構建步驟（例如使用Webpack或Browserify）中對CSS類名選擇器限定做用域的一種方式（經過hash實現相似於命名空間的方法）。
原理：在使用CSS模塊時，類名是動態生成的，惟一的，並準確對應到源文件中的各個類的樣式。

用法：

定義一個style.scss文件，例如內容爲：

$green: #14c3c3;
.title {
  font-size: 20px;
  color: $green;
}

在文件中的使用：

import React, { Component } from 'react'
import style from './style.scss
class index extends Component {
  render() {
    return <div className={style.title}>這是個人詳細頁面哦</div>
  }
}
export default index

CSS Module參考資料：https://www.jianshu.com/p/17fb9eb0a491