讓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