I tend to write a line in CSS, save the file and refresh the page in browser so I can see the result. Any tool that is more complicated and takes more time to see the result is not for me.
How can you work with CSS on localhost while seeing the result on Office 365?
1. Create a project in Visual Studio and add a stylesheet (I chose Core 1.0 Cloud project)
2. Click on Debug -> Start Without Debugging
3. Browse to the CSS file on localhost
4. Open a SharePoint site on Office 365 that you want to style
5. Click on "S" icon, paste the URL to the CSS file and click on "Add website" button
Don't have the "S"? Sans Style free. Get it at Chrome web store
6. Refresh the page
You'll get this error:
Mixed Content: The page at 'https://toughcookie.sharepoint.com/sites/dev/SitePages/DevHome.aspx' was loaded over HTTPS, but requested an insecure stylesheet 'http://localhost:57355/css/sansstyle.css'. This request has been blocked; the content must be served over HTTPS.
7. Click on the shield in the top right corner
You'll get a popup with "This page is trying to load scripts from unauthenticated sources"
8. Click on "Load unsafe scripts" link
You are ready to go! Page URL in browser is showing the not secure "https", but your CSS saved locally will be loaded to the Office 365 page.
More Sans Style? How to inject URL to a CSS to file into a website, also SharePoint classic and modern sites pages in Branding SharePoint and Office365.
I also wrote
Branding SharePoint and Office365
SharePoint Branding Modern Pages
Digitization, automation, artificial intelligence and robots
Career in IT. Sex drugs and rock and roll
SharePoint Store - Buying an Add-in, the Customer View
Points: Developer's Guide to App Business Value
Ups, I sold an app to 1 billion people!