综合编程

React Starter: Adding Sass to Create React App Applications

微信扫一扫,分享到朋友圈

React Starter: Adding Sass to Create React App Applications
0

Adding Sass is one of the first things most developers do when starting an application. Writing in plain CSS can be done, but Sass provides much more power with features like:

  • Variables
  • Nesting
  • Math
  • Mixins
  • Functions
  • Imports
  • And More

Add Sass to Create React App using a single line: yarn add node-sass

For the official docs, check out the Create React App guide.

For a video walkthrough, here you go!

https://scotch.io/embed/vimeo/336880270

Steps to Add Sass

The steps to add Sass to Create React App are:

  1. Install node-sass: yarn add node-sass
  2. Convert your .css
    to .scss
  3. Import your .scss
    files in your React components like App.js

Install node-sass

Here’s a deeper dive. In order to add Sass to a Create React App application, we need a single command:

# using npm
npm install node-sass --save

# using yarn
yarn add node-sass

Renaming .css to .scss

Once you have that, we can rename our App.css
to App.scss
.

Import the .scss File

In our App.js
file, we can import the Sass file using the .scss
extension.

import './App.scss';

Once we restart our yarn start
command, we can see that our Sass file is imported!

Conclusion

Create React App allows us to extend it with a quick command!

阅读原文...


微信扫一扫,分享到朋友圈

React Starter: Adding Sass to Create React App Applications
0

JSFeeds

Multiple C ++ / CLI errors

上一篇

Raspberry Pi 3: Node.js Hello world

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

React Starter: Adding Sass to Create React App Applications

长按储存图像,分享给朋友