Local Styles Processor

Sometimes you just need to process some styles.

Table of Contents

1. Project Purpose
2. Resources
3. Prerequisites
4. Installation
5. Setup
6. Development Process
7. Troubleshooting
8. Contributing
9. License

Purpose

Occassionally I need to process a bunch of styles but the project I am working on was built using something like grunt and no longer works. If fixing there build system is outside the scope of what I am supposed to do, then it is useful to have a project like this that I can easily modify and process SCSS and CSS however I want.

(back to top)

Useful Resources

• Dart Sass - for compiling .scss to .css
• PostCSS - for processing those .css files
• Autoprefixer - for parsing CSS and add vendor prefixes to CSS rules using values from Can I Use
• CSSNANO - a modular minifier, built on top of the PostCSS ecosystem
• More PostCSS Plugins!

(back to top)

Prerequisites

• Have node installed on your machine

Installation

1. Clone the repo

   git clone https://github.com/spaceFitzpa/scss-postcss-compiler.git

2. Install NPM packages (Use node version 16.13.0)

   npm install

(back to top)

Setup

• Add whatever .scss file you want compiled to CSS and processed with PostCSS to src/styles/scss/
• Update the package.json scripts input and output directories match yours
• Install any PostCSS plugins you intend to use
• Update postcss.config.js file with any of the plugins you intend to use

Development

• Run npm run compile:styles
• This compiles the SCSS from the file you input and outputs the .css and .css.map files into the src/styles/css directory.
• Then PostCSS runs whatever processes you have applied in the postcss.config.js file to your newly created .css and .css.map files and outputs these processed files into /dist/styles/css/

(back to top)

Troubleshooting

• Make sure are using the node version specified in the package.json
• Make sure you told SASS and PostCSS what input and output files/directories you want to use
• Make sure the postCSS plugin you are trying to use is installed and added to postcss.config.js

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License.

(back to top)