I'm using Laravel locally with XAMPP, with some code written by someone else. After installing everything I get the following directory tree:
xampp
...
htdocs
myproj
.git
app
assets
classes
commands
config
controllers
database
lang
models
start
storage
tests
views
bootstrap
provider
public
sphinx
vendor
wpplugin
...
...
I know the code uses Zurb Foundation (among other tools), with SCSS files.
In XAMPP Control Panel, in the Apache httpd.conf, I define DocumentRoot as C:/xampp/htdocs/myproj/public and this works fine.
The files xxxxxx.blade.php under views/layouts contain blade lines that look like:
{{ stylesheet_link_tag('yyyyyy') }}
Googling this, I think (not sure) it's using something called CodeSleeve to resolve yyyyyy, which, as I understand, look for yyyyyy.css files under app/assets/stylesheets. In this directory I can see both yyyyyy.css files and _yyyyyy.scss files, and I can see the former is presumably calling the latter with a require command in an alleged comment.
As long as I update controllers and/or views, I can see the changes reflected immediately under localhost in the browser. However, any attempt to modify a _yyyyyy.scss (even as much as adding a space) - results in an error in browsing, losing all the styling etc.
My question is: What is the mechanism that presumably converts the SCSS files into CSS in real-time, and how can I do testing locally with modifying the SCSS files?
It's Notepad adding the UTF-8 BOM in the beginning of the file!!
When editing with Notepad++ and saving the new file with no BOM, styling comes back again.
(Thanks to Andy who helped solving this)
Related
First of all I have to note that this all worked well some time ago. I have returned to project after some time. Meanwhile I have updated PhpStorm and migrated to Win10. Everything else stayed untouched.
I have problem with triggering scss parial compilation. When I make changes in root file "global.scss" everything works ok - partials are also compiled. However when I make changes in partials PhpStorm not triggers compilation of root file.
PhpStorm version: 2017.2.3
File structure:
Watcher config:
Scope config:
global.scss
I have tried a lot - nothing works. It seems that partials - prefixed with underscore are just ignored by file watcher.
EDIT:
I found something - it seems that wildcard in scope pattern ignores underscored files. However partials are marked as included in files tree. I temporarly changed scope to project files and it works well - unfortunetally I can not leave this setting.
EDIT2:
I don't know is it bug or feature but PhpStorm handles nested Source roots in strange way. Check this file structure:
Without source root for scss directory, compilation is triggered even with scope pattern. However compiled css is placed in wrong directory - so it is not usable.
Based on your info and investigation: you are using nested "Source" folder (on scss) and $SourcepathEntry$ & related macro... which does not seem to work as you expected in your IDE version.
Get rid of it -- your setup does not need it at all. Your folder structure is pretty standard so it can be resolved using more "standard" ways.
Disable this File Watcher for now (you may delete it later) and make new one.
There try $FileDirPathFromParent()$ parametrized macro (it accepts parameters). For example for $FileDirPathFromParent(src)$ it returns foo/bar for some/path/src/foo/bar/baz.scss file path. This macro should do the job when making the needed path.
Shahzaib here, coming to you for a bit of help !
I'm still new in the Shopify and liquid stuff but i'm getting there.
I'm cutrently trying to minify a scss.liquid file on Shopify, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?
Do you guys have something to recommand regarding minifying a scss.liquid file ?
thanks in advance,
regards, Shahzaib.
I recommend setting up a gulp task to do this. This will help simplify your SCSS files into individual files for whatever they style. Also, you won't be edited your theme's default theme.scss.liquid file, so it is easier to overwrite default styles, and you know exactly which styling is yours vs the theme's.
To setup a gulp task, you will need to install node.js and gulp. I recommend using npm for this. Here is a good introduction tutorial to this which you'll need to adapt a bit to work with your Shopify file structure. For example, I recommend adding a src directory for your custom .scss files, and compiling them into one single file in the assets directory, instead of working directly in the theme.scss.liquid file.
https://css-tricks.com/gulp-for-beginners/
Once you have completed those instructions, make sure to add node_modules to your .gitignore file before committing.
Next, setup your project to use themekit. https://shopify.github.io/themekit/ , and have your gulp task run on save of the file. This will compiling your src files into a single file in the assets directory which will then be uploaded to your store by themekit.
Hope this helps!
I'd second than10's answer, and add that if minification of static assets is going to be part of your theme development workflow, use gulp.js running locally with something like gulp-shopify-upload watching your changes and pushing them up to your store:
https://www.npmjs.com/package/gulp-shopify-upload
See basic usage in particular.
I understand how to make a sass file watch a css file through the terminal.
But this is only the case when the files are on my computer.
How to set up the same process if I'm editing files directly on the server.
When creating a website (I'm loading the files from the server on Sublime Text3) and I don't have any files on my computer and I don't want them on my computer either. I have no idea how to make sass watch my css file if the files are loaded directly on my text editor and saving everything directly on my server (so without saving anything on my computer).
If this is done through the terminal or any other way,, how is this done?
After many hours and having squared eyes now, I managed to find a blog with a solution.
Here is the blog:
(1) . http://blog.omgmog.net/post/getting-started-with-using-sass-in-your-existing-website/
Long story short: I got it to work and to do what I want it to do! smile
I went through the steps as mentioned in the blog. In order to make it work I had to download a php file, which can be found here: (2) . http://leafo.net/scssphp/
In addition I had to create another php file and add some code into it (which can also be found in the second link).
Afterwards I had to link to the php file I had created and specified the .scss file to load (normally you don't link it to any php and you would specify it to the .css file).
The blog in link one explains everything in clear steps. Hope this helps others as well as I didn't see this question being answered anywhere before on StackOverflow!
I have installed CodeSleeve asset-pipeline to manage and minify assets for my project. As I understood, all the scripts and stylesheets are controlled from manifest files located at: app/assets/stylesheets/application.css and app/assets/javascripts/application.js
That is all great, but what if I want to load different assets for different page? For example admin side of the application.
This situation is also mentioned in asset-pipeline documentation and recommended to use separate manifest files.
For example, if your application is silo'ed into admin section and user section then it probably makes sense to have a separate manifest file for each section.
Sounds great, but question remains. How?
Here is a similar question about asset-pipeline on Rails 3.1 and a somewhat complicated solution for such a obvious need, as is the need to include different assets in different sections of the application.
I still tried to make sense of that solution, but this is about Rails, so I still have no idea where are the manfiest files added in Laravel version?
I must admit I first went much longer and complex path, hacking the config array with Laravel Event listener. Got it working though until I turned on production environment, which broke my admin section styles. Now after all the hair-pulling came back to asset-pipeline documentation and found the very simple solution which had been right in front of my eyes the whole time: All you have to do is add parameter to include tag, like this:
<?= javascript_include_tag('admin/application') ?>
This will point to folder assets/admin and look for application.js from that folder. Resulting html markup will be:
<script src="assets/admin/application.js" data-foo="bar"></script>
Same thing with stylesheets.
I'm playing with Padrino, experimenting with a very minimal site at the moment with no DB and just a few HAML and SASS files under the app/ directory.
What I've noticed is that each time I render a page which links to a stylesheet that's defined in a .sass file, it compiles the stylesheet to .css and stores it under public/.
This is all very well, but I also have some static assets stored in public/, including images and some other hand-written .css files.
What this means is that my public/ directory becomes a mix of things I placed there and things compiled by Padrino. So, looking in there will show a bunch of .css files, some of which are compiled .sass files, and some of which are my actual primary static assets. This is confusing.
Is there a way I can stop Padrino (or Sinatra, or Rack, or whatever is doing it) from saving these compiled files during development, and keep my public/ clean?
Alternatively, can someone explain why what I'm asking for is a bad idea / by design / I should learn to love it instead? :-)
Thanks.
I don't know how to set the SASS settings for Padrino, I had a look and couldn't find anything helpful either. I would feel a bit nervous about running it this way too, it could easily get confusing and unhelpful, and what if the asset names clash?
What you could do is not add SASS in via Padrino, and then run it yourself either via the --watch switch or via something like Guard. That way you can also specify different subfolders within the public directory (images/css/js etc), which is what I do (although it does mean you need to remember to add the subfolder as part of the path when describing links). The app doesn't even need to know you're using SASS, and precompilation, when it's this simple, is surely better than the kind of compilation on demand that you've got at the moment (IMO).
You might try the Padrino mailing list for help with the settings.
Using the padrino-sprockets gems I also wanted to change the default /public/stylesheets directory to /assets/stylesheets where sprockets pick them up. I found that my padrino project genereated with the -c sass option had a /lib/sass_plugin.rb file with the following:
# Enables support for SASS template reloading for rack.
# Store SASS files by default within 'app/stylesheets/sass'
# See http://nex-3.com/posts/88-sass-supports-rack for more details.
module SassInitializer
def self.registered(app)
require 'sass/plugin/rack'
Sass::Plugin.options[:template_location] = File.join(Padrino.root, "app/stylesheets")
Sass::Plugin.options[:css_location] = File.join(Padrino.root, "public/stylesheets")
app.use Sass::Plugin::Rack
end
end
Editing the :css_location path and restarting Padrino did the trick!