create-react-app构建的react项目中使用sass的正确姿势

1. 安装node-sass

$ npm install node-sass --save
$ # or
$ yarn add node-sass

之后你就可以使用Sass了

//可以在js文件中通过import 来引用*.scss文件
import  './public.scss'
//可以在scss文件中通过@import来引用*.scss文件
@import './public.scss';

注意：这边引用路径的都是相对路径。

2.使用绝对路径来引用scss文件

在用scss的过程中，你可能想要在src目录下创建一个放置公共scss文件的目录，这个时候使用相对路径会出现烦人的‘../../../../public.scss’的写法，使用绝对路径的方式明显方便很多，在最新的文档中，官方给出了一个非常简单的操作，在src目录下添加一个jsconfig.json文件：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

之后就可以任意使用绝对路径的写法了：

//可以这样引用scss
@import 'styles/public.scss';
//甚至可以这样来引用一个组件
import 'component/Button.js'

总而言之，写代码一个爽。

Note: jsconfig.json如果要生效，请将react-scripts升级至最新版本。

参考资料

1. 添加 Sass
2. 使用绝对路径