Phpstorm minify css
![phpstorm minify css phpstorm minify css](https://www.speich.net/wp/wp-content/uploads/2016/04/step01.gif)
If you want to include all of the Foundation pre-defined template rules “out of the box” you can get it all by include foundation-everything in which case you end up with a very long CSS file. That only loads all the functions and modules to be “ready for use” but to get any actual CSS output you need to use a Sass rule, such as a mixin, within your SCSS file. Well it turns out you cannot just do ‘foundation’ in your SCSS file. No more compilation errors, great! Except my now-compile CSS file was only showing the Foundation header. I could have added –load-path= to the Watcher argument list, but that is pre-populated with phpStorm defaults and a proper environment variable seems “cleaner” to me. Under the Watcher panel I used Other Options and set the environment variable SASS_PATH=/Users/lancecleveland/WordPress/tools/npm/node_modules/foundation-sites/scss/. I had to add the library path to the Sass compiler path. The compiler could not find the directory. PhpStorm was no longer telling me it could not find the Foundation Sass files, but when it tried to auto compile via the file watcher it failed. In reality I could have added only the scss subdirectory under ~/WordPress/tools/npm/node_modules/foundation-sites but I like to “snoop around the code” and wanted to be able to easily access all the imported files if only to read what they do. This allows ‘foundation’ to be marked by phpStorm as “findable” as well as the. I then marked that directory as a resource root. I added the npm directory for Foundation as a resource directory by going to the phpStorm | Preferences | Directories menu and adding ~/WordPress/tools/npm/node_modules/foundation-sites as a directory included in my project.
#PHPSTORM MINIFY CSS CODE#
These are scanned but the phpStorm autocomplete and code inspection background processes to do things like mark an as “hey I can’t find this thing”! in order to catch problems BEFORE pushing your project down the production chain. If you Google for a few minutes you’ll find you need to tell phpStorm which directories are to be used as resources for your project. According to the Foundation docs, you can add ‘foundation’ to your SCSS file and as long as your import paths are set properly it will setup foundation within your project. Initially I was having problems with phpStorm finding the foundation library. I use them in phpStorm to do things like compile SCSS files then minify them or to minify JavaScript files so they are always ready for production. Great for things like compiling SCSS source files into browser-readable CSS files for your project. What is a file watcher? It is a background process that runs whenever a file changes. Remember that as this is important for configuring the phpStorm file watchers. This created the ~/WordPress/tools/npm/node_modules/foundation-sites/ directory where the Sass files for Foundation live. My path is ~/WordPress/tools/ where I have an entire npm directory in place. I opted to put the Foundation library in a parent directory for my projects as I use it for several projects outside of Store Locator Plus. I installed Foundation using node package manager. With any luck my cheat-sheet here may save you some time. I wanted to add Foundation to the mix, but it turned out to take longer than I anticipated. I already have phpStorm setup for my WordPress development and use Sass to compile my own CSS libraries. I decided it would be a good idea to stay with Foundation to help style my interfaces in the WordPress SLP product.
#PHPSTORM MINIFY CSS PLUS#
However, the MySLP version of Store Locator Plus has been built using Foundation and React. I’ve been working with Vue recently and like their pre-defined templates. In an effort to improve the overall user experience in Store Locator Plus™, my business locator plugin for WordPress, I have been playing with pre-defined interface frameworks.