https://github.com/yowainwright/postcss-scss

This is my setup to use postcss for scss! 🤔 The script works. Feel free to copy if you've got something nitty gritty to do.
https://github.com/yowainwright/postcss-scss

config css npm-scripts postcss sass scss

Last synced: 7 days ago
JSON representation

This is my setup to use postcss for scss! 🤔 The script works. Feel free to copy if you've got something nitty gritty to do.

• Host: GitHub
• URL: https://github.com/yowainwright/postcss-scss
• Owner: yowainwright
• License: mit
• Created: 2021-03-17T20:15:49.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-18T05:54:13.000Z (almost 4 years ago)
• Last Synced: 2024-11-08T18:50:02.311Z (2 months ago)
• Topics: config, css, npm-scripts, postcss, sass, scss
• Language: SCSS
• Homepage:
• Size: 21.5 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Postcss scss 🎨

The setup of this repository is to be able to smoothly transition from scss to postcss and not need a postcss config in another project. 

I think I was able to do it. Look at the [config](https://github.com/yowainwright/postcss-scss/blob/master/package.json#L31-L37) to decide for yourself! 

> **Note:** I made the [browserlist](https://github.com/yowainwright/postcss-scss/blob/master/package.json#L31) really broad to ensure that [autoprefixer](https://github.com/postcss/autoprefixer) is working (and it is!).

---

## Install

```sh

npm install autoprefixer postcss postcss-advanced-variables postcss-cli postcss-nested postcss-scss

# 🚀

```

---

## Setup

```javascript

"devDependencies": {

  "autoprefixer": "^10.2.5",

  "postcss": "^8.2.8",

  "postcss-advanced-variables": "^3.0.1",

  "postcss-cli": "^8.3.1",

  "postcss-nested": "^5.0.5",

  "postcss-scss": "^3.0.5"

},

// do not use this browserlist

// it was just used to insure autoprefixer is working

// Read https://github.com/postcss/autoprefixer#browsers for more detail 📚

"browserslist": [

  ">0.2%",

  "not dead"

],

// the order of postcss execution matters below 👮‍♀️

"scripts": {

  "build": "postcss src/index.scss --syntax postcss-scss -u postcss-nested -u postcss-advanced-variables autoprefixer -o dist/index.css"

}

```

---

Thanks to [Craig Buckler](https://twitter.com/craigbuckler) for his great Sitepoint [post](https://www.sitepoint.com/postcss-sass-configurable-alternative/). 🙏