Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • icon picker
          4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
4. Styling with SCSS

4. Styling with SCSS

1. Create CSS or SCSS files to setup


2. Config Webpack to process Styles within rules


Use css-loader + style-loader Webpack Plugin
Load CSS into JSX
⁠
https://www.npmjs.com/package/css-loader
⁠
⁠
Take CSS in JS and insert to DOM
⁠
https://webpack.js.org/loaders/style-loader/
⁠
Config Webpack

3. Install SASS / SCSS

Install SASS loader
Transform SCSS to CSS for webpack
⁠
https://www.npmjs.com/package/sass-loader
⁠
Install Node-Sass
Node wrapper for libSass
Re-config Webpack
{
test: /\.s?css$/, // process both normal css and scss files
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}

4. Manage SCSS files


Partial CSS start with underscroe:
base / _base.scss (body, heading, fonts...)
/ _font.scss
components / header.scss
/ option.scss

// styles.scss
// style vars can be used in imported SCSS files
$blue-color: blue;
$red-color: red;

@import './base/_base'
@import './base/_font'
@import './components/header'
@import './components/option'
1 rem = 16px

Block Naming Identifier (BEM)
header___title

Reset CSS

All browsers are setting the same places
no defualt OS font (like Robotto)
no browser default button
Reset CSS as npm module
Just like Tailwind
Read about Normalize.css
⁠
https://necolas.github.io/normalize.css/
⁠
Import into porject
import 'normalize.css/normalize.css'

1. Create CSS or SCSS files to setup
2. Config Webpack to process Styles within rules
3. Install SASS / SCSS
4. Manage SCSS files
Reset CSS
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.