DAY 04 实作环境配置 - 1

建立专案

首先先在 GitHub 上建立起一个练习专案吧！

Untitled

输入好自己的专案资讯後，依照指令将 local 中建立的专案丢上去ㄅ！

为了 demo 方便，这边直接使用 react 的 creat-react-app 快速建立一个前端的专案内容～

这边附上官方的快速安装指令

npx create-react-app my-app
cd my-app
npm start

Untitled

git 接上後，我们就拥有一个可以乱玩实作 sass 的专案罗！

安装套件

因为目前习惯用 react 所以就使用 react 来搭配 sass 的实作，首先要做的是安装～

yarn add node-sass

Untitled

新增 SASS File

之後新增一个练习用的 sass 档案在 src 资料夹中

Untitled

在档案中，我们先来个基本变数跟 sass 的样式套用

$primaryColor: blue 
h1 
  color: $primaryColor

这边用到了两种方法

变数形式 $ ： sass 的写法，让我们得以在 css 中建立一种变数的方式去统一修改颜色。
h1 套用变数颜色：在 h1 中的内容，就会依据 color 中所设定的变数颜色显示。

再来我们要将这个 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

Untitled