首先先在 GitHub 上建立起一个练习专案吧!
输入好自己的专案资讯後,依照指令将 local 中建立的专案丢上去!
为了 demo 方便,这边直接使用 react 的 creat-react-app 快速建立一个前端的专案内容~
这边附上官方的快速安装指令
npx create-react-app my-app
cd my-app
npm start
git 接上後,我们就拥有一个可以乱玩实作 sass 的专案罗!
因为目前习惯用 react 所以就使用 react 来搭配 sass 的实作,首先要做的是安装~
yarn add node-sass
之後新增一个练习用的 sass 档案在 src 资料夹中
在档案中,我们先来个基本变数跟 sass 的样式套用
$primaryColor: blue
h1
color: $primaryColor
这边用到了两种方法
再来我们要将这个 sass 档案去套用到 App.js 中,使其生效,为了方便检视效果,先在 App.js 中建立一个 h1 ,并且在上方 import './MyFirstSass.sass';
import logo from './logo.svg';
import './App.css';
import './MyFirstSass.sass';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>this is blue h1</h1>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
刚好遇到了版本问题,先关闭 node 并且更新 package
yarn upgrade
完成後再重新打开
yarn start
我们看到一个有蓝色 h1 的字,恭喜你成功啦!
除此之外,也欢迎大家走走逛逛关於我们团队夥伴的文章
lu23770127 - SASS 基础初学三十天
10u1 - 糟了!是世界奇观!
juck30808 - Python - 数位行销分析与 Youtube API 教学
HLD - 浅谈物件导向与Design Pattern介绍
SiQing47 - 前端?後端?你早晚都要全端的,何不从现在开始?
>>: 树选手2号:random forest [python实例]
DenseNet201 简介 DenseNet继承了ResNet的短路连线机制,并调整为密集连接机制...
功能测试时很常需要删掉坏掉的资料库纪录,这时就需要重置测资,但每次都开管理工具来做太麻烦了,写个小工...
上一篇说到 JavaScript 原始型别与物件型别,我想今天试着来讨论「传值」与「传址」;在其他程...
万里无云时 总觉得喘不过气 要问为什麽 一定是 无云天空下 只有我问我 该往那去 寂静夜深时...
如何列举子目录所有档案 ? + 条件搜寻 ? os.walk() 的用法厘清,记录一下体会心得,以下...