在Create React App v2中使用Sass

With the upgraded Create React App released recently, we got a lot of new tools to play with. Sass is one that I'm excited to have built in since we used to have to have .scss files compile and write to .css files right in our folder structure. Messy files when you have two of the same styles.scss and styles.css.

随着最近发布的升级版Create React App的出现 ，我们有了很多新工具可以使用。 Sass是我很高兴内置的一个，因为我们曾经不得不在文件夹结构中直接编译.scss文件并写入.css文件。 当您具有两个相同的styles.scss和styles.css时，会出现混乱的文件 。

Create React App 2 makes it super easy to use Sass in 1 line.

Create React App 2使在1行中使用Sass超级容易。

You may be concerned about using Sass in React. Isn't a smarter way to write styles with CSS-in-JS libraries like styled-components or aphrodite? I believe that adding Sass support to Create React App will be a big help to beginners of React. How do I use Sass in React is one of the questions I always hear from people getting into React. With the React 16.6 additions like React.memo() and the React 16.7 functional additions like hooks, starting with React will be easier than ever!

您可能会担心在React中使用Sass。 用CSS-in-JS库（如样式组件或美之女神）编写样式不是更聪明的方法吗？ 我相信为Create React App添加Sass支持将对React的初学者有很大帮助 。 在React中如何使用Sass是我经常听到人们接触React的问题之一。 使用React 16.6添加的 内容（如React.memo（））和React 16.7功能的添加物（如hooks） ，从React开始将比以往更加轻松！

快速开始 ( Quick Start )

The steps to use Sass in Create React App are:

在Create React App中使用Sass的步骤是：

1. Install node-sass: npm install node-sass
   安装node-sass ： npm install node-sass
2. Change .css files to .scss
   将.css文件更改为.scss
3. Change any imports to use .scss
   将任何导入更改为使用.scss

npm install node-sass -S

Once we've changed the file name from .css to .scss, we can import the Sass:

将文件名从.css更改为.scss ，就可以导入Sass了：

// replace 
import "./styles.css";

// with
import "./styles.scss";

Done! Create React App will know to parse your .scss files and add the styles to your project.

做完了！ 创建React App将知道解析您的.scss文件并将样式添加到您的项目中。

使用和共享Sass变量 ( Using and Sharing Sass Variables )

How do we share variables across files? We are able to import our Sass files from other Sass files. Let's say you create a variables file:

我们如何在文件之间共享变量？ 我们能够从其他Sass文件导入Sass文件。 假设您创建了一个变量文件：

variables.scss (variables.scss)

$primaryColor: #BADA55;

We can import this inside of another file like we normally would in Sass:

我们可以像在Sass中通常那样将其导入另一个文件中：

styles.scss (styles.scss)

// import starting from the src/ folder
@import "variables.scss";

// can also be relative import
// @import "./variables.scss";

// we can use the $primaryColor variable now
h1, h2 {
  color: $primaryColor;
}

来自第三方软件包的Sass文件 ( Sass Files from 3rd Party Packages )

If we want to use any 3rd party libraries like Bulma or Bootstrap (Bulma is my favorite right now), we don't need to import the entire CSS library anymore.

如果我们要使用Bulma或Bootstrap之类的任何第三方库（ Bulma现在是我的最爱 ），则不再需要导入整个CSS库。

With Sass in React, we can import just the files we need. First, we have to install Bulma.

使用React中的Sass，我们可以仅导入所需的文件。 首先，我们必须安装Bulma。

npm install bulma -S

If we look at Bulma's GitHub in the sass/ folder, we can see where they place their .sass files. Notice they are using .sass and we are using the .scss variant. No problems, node-sass can read and @import both!

如果我们在sass/文件夹中查看Bulma的GitHub ，我们可以看到它们放置.sass文件的位置。 通知他们正在使用.sass ，我们使用的是.scss变种。 没问题，node-sass可以读取和@import都可以！

Import files from node_modules using ~

使用〜从node_modules导入文件

The ~ let's webpack and Create React App know to look in the node_modules/ folder for the files we need. Let's add a few of the files we need to our app:

~让我们的webpack和Create React App知道在node_modules/文件夹中查找我们需要的文件。 让我们将一些所需的文件添加到我们的应用程序中：

styles.scss (styles.scss)

// import using ~
@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/button.sass";
@import "~bulma/sass/layout/section.sass";

Now, we can use Bulma's button and section.

现在，我们可以使用Bulma的button和section 。

App.js (App.js)

function App() {
  return (
    <div className="App section">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button className="button is-danger is-outlined">
        Hello
      </button>
    </div>
  );
}

This approach let's us keep our CSS bundle sizes as small as possible as we only import what we need.

这种方法让我们将CSS包的大小保持为尽可能小，因为我们仅导入所需的内容。

结论与演示 ( Conclusion and Demo )

Using Sass in React is a quick way to get styling in your app. It is also recommended to look at CSS-in-JS solutions so that we can create even more modular CSS in our component based React apps.

在React中使用Sass是在应用中进行样式设置的快速方法。 还建议您查看CSS-in-JS解决方案，以便我们可以在基于组件的React应用中创建更多模块化CSS。

Here's the CodeSandbox with the demo of Sass in Create React App 2:

这是带有Create React App 2中Sass演示的CodeSandbox：

翻译自: https://scotch.io/tutorials/using-sass-in-create-react-app-v2