How do I add SCSS (SASS) source files

Pulling my hair out trying to work out how to create additional SCSS files. Can anybody provide some guidance?

I have managed to create a ‘style.css’ and a single ‘main.scss’ which work fine. I now want to split the code from the main.scss across multiple new scss files. I can’t find an intuitive way for doing this.

imho, because you will essentially manipulate code files without the need for a visual feature, the best way is to create/split the files from outside Pinegrow with your favorite editor (VSC, Sublime or any other).

I have found a method - but it is extremely slow and overly complex. Can’t believe that PineGrow doesn’t make it easy to create and import a new SCSS file. The method I used was.

  1. Under style sheets click on ‘Add and Manage’
  2. Create a new CSS file.
  3. Attach this to the page and close.
  4. Under ‘Stylesheets’ the new css is now listed. Click the down arrow and ‘Covert to SCSS’
  5. Go back and repeat.

Very slow!! Is there an easier way? Plus, if anything changes in the naming for paths then one has to go and repeat all the steps.

I confirm, there is no dedicated feature to split/concatenate/and more SASS/SCSS source files and to setup a flow with @includes and so on.

If you don’t already have to sass files in your project folder, you will have to “manually” create/add the files. However, from the Stylesheets manager, you can associate CSS files to existing SASS files and Pinegrow will then take care of the compilation process.

If you decide to use Bootstrap, we have a dedicated feature to setup and use the Bootstrap source files. You can find it from the Page menu > Customize & update Bootstrap theme.

2020-11-13_11-08-37

Thanks for your suggestions - unfortunately, I can’t get any of it to work properly. I set up everything manually - but then couldn’t edit within PineGrow. Some files are imported and others are not. Some SCSS files I can open and edit and they save fine, others I can open but then they don’t save - it’s all very confusing and feels very broken.

- I resorted all the SCSS files with an external editor - and it now works within PineGrow.

Hence my initial suggestion to manage this case with an external editor.