React脚手架中使用Sass

一、安装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';

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

二、使用绝对路径来引用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升级至最新版本。

React脚手架中使用Sass相关推荐

react项目中使用sass
因为脚手架中已经有了sass,用的话只需要导个包 node-sass
在react脚手架中使用Tailwind CSS （入门）
参考教程 Build a Website with React and Tailwind CSS - SitePoint 本文翻译外网,主要自用 1. 安装 Tailwind CSS 所需的依赖项 ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
React脚手架学习笔记
一.前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方模块的依赖: 比如项目发 ...
【webpack系列】从零搭建 webpack4+react 脚手架（四）
经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...
创建react脚手架
react脚手架工具 1 .全局安装create-react-app npm i -g create-react-app 2. 创建react项目 create-react-app 项目名 3.进入项 ...
React学习笔记---React脚手架
React脚手架一.使用create-react-app创建react应用 1.react脚手架 2.创建项目并启动 3.react脚手架项目结构 4.功能界面的组件化编码流程(通用) 5.用脚手架 ...
React学习笔记3：React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServe ...
React脚手架搭建及目录结构介绍
react脚手架(create-react-app)搭建 npm install -g create-react-app create-react-app todolist (文件夹名) npm st ...

React脚手架中使用Sass

一、安装node-sass

二、使用绝对路径来引用scss文件

React脚手架中使用Sass相关推荐

最新文章

热门文章