create-react-app 中的SCSS——dart-sass 以及 styled-components

create-react-app中的SCSS

由于React的设计理念，它不会对代码约定或文件组织实施严格的规则。使用React创建项目时需要根据自身需求选择适合自身的约定。比如要想使用css预编译语言scss时，或者要使用router时就必须自己在webpack中配置。本文就来讲一讲让React支持scss的两种方法。

dart-sass

在搜索框中输入react sass字样，查看文章，他们总是提醒我们使用如下命令行添加插件：

$ npm install node-sass --save

# 或者
# $ yarn add node-sass

然而我按照这种方法安装了node-sass一直安装不上。之前的webpack知识告诉我可以用dart-sass来代替node-sass，但create-react-app不支持dart-sass。于是我去Stack Overflow上搜索得到这么一个回答。 在终端运行这句话后果然发现可以支持scss文件了。再去看module中的node-sass文件夹的package.json。换成了dart-sass。大概原理是npm 6.9 版本新增了package alias功能，可以通过这个功能来实现偷梁换柱。

至此，可以在scss文件中使用

@import 'src/xxx.scss'

来引用另一个scss文件； 或者使用

import 'index.scss'

在组件中使用scss文件。

styled-components

另一种支持scss的方法是使用scss in JS/TS。styled-component就是这样的一种方法。 运行如下命令：

$ yarn add styled-components 
#若使用tsx写组件需要再安装types版本
$ yarn add @types/styled-components

引入组件

import styled from "styled-components";

使用组件：

import styled from "styled-components";

const Item = styled.div`
  display: flex;
  justify-content: space-between;
  background: #fff;
  font-size: 18px;
  line-height: 20px;
  padding: 10px 16px;
  `
function Item(){
  return(
    <Item>
       hello world
    </Item>
  )
}

也可以把

const Item = styled.div`
  display: flex;
  justify-content: space-between;
  background: #fff;
  font-size: 18px;
  line-height: 20px;
  padding: 10px 16px;
  `

根据模块化的思想再次抽离出来成一个模块。 是不是很方便呢？