I've inherited a project that uses Sass. I'm a 'NET developer so compiling CSS isn't really something ive had much exposure to. The previous developer told me (as I run on Windows and he runs on a MAC) to install prepros.
The steps I have run through are:
Installed Ruby 2.3.0 for Windows
Installed sass "gem istall sass"
Installed compass "gem install compass"
Installed sass-globbing "gem install sass-globbing"
Installed compass-install-once "gem install compass-install-once"
I then opened Prepros and dragged in my "static folder", which has a structure like so:
Static
css
js
sass
components (multiple files in this directory)
components.sass
screen.sass
screen.css looks like:
#import compass/reset
#import lubalin.css
#import variables
#import typography
#import main
#import components
#import elements
#import shop
#import blog
#import sponsor
#import theme
And the content of the screen.sass files looks like so:
#import "components/*"
In PrePros I changed the compiler to use Ruby Sass instead of Node Sass (on the advice of the previous developer).
Now, when I click on screen.sass in PrePros and click "Process file" I get the error message "Error: It's not clear wghich file to import for '#import "components/*"'.
I found some threads online that suggested that this was due to Windows, and that the wildcard should be changed to #import "components/.", however when I run with this command the error i get is "Error: File to import not found or unreadable: components/."
Strangely, the file that prepros creates i.e. seems to understand perfectly which files to import for components.sass because I can see in the file the following section:
{
"path": "sass/components.sass",
"imports": [
"sass/components/_address.sass",
"sass/components/_buttons.sass",
"sass/components/_checkboxes.sass",
"sass/components/_cookies.sass",
"sass/components/_emailSignup.sass",
"sass/components/_forms.sass",
"sass/components/_moreContent.sass",
"sass/components/_postCode.sass",
"sass/components/_rte.sass",
"sass/components/_search.sass",
"sass/components/_separator.sass",
"sass/components/_tooltip.sass",
"sass/components/accordion.sass",
"sass/components/equalHeight.sass",
"sass/components/grid.sass",
"sass/components/modal.sass",
"sass/components/svgImages.sass",
"sass/components/table.sass",
"sass/components/_checkboxes.sass"
]
},
So it seems strange that PrePros can tell which files to import, yet when I try to compile it doesn't understand!
Lastly, the contents of the compass (config.rb) is:
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
Can anyone help a Sass newbie that;s out of their depth get PrePros up and running!? What am I doing wrong?
Thanks for your time in advance
dotdev
In my opinion, if you are a NET Developer you don't need PrePros, because you have Visual Studio good plugin-compilers. Try WebEssentials, it will do all the work for you. WebEssentials compiles SASS/SCSS files automatically when you save it.
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
i wanted to ask, how can i continue working on existing project, while having no experience on compass/sass used here?
I always use Grunt and Less, but now i have to face Compass and Sass.
Here, i created screenshot of files structure.
My problem is, how setup system to get this all work. For example i see this code in compass/scss/style.scss:
#import "compass";
#import "bootstrap";
#import "mixins";
#import "defaults";
#import "layouts/forms";
#import "layouts/header-footer";
#import "layouts/home";
For example, i see #import compass, but there is no directory like this, and i dont know how can i attach - install compass, to get this work.
And another question, with grunt all i needed, was gruntfile configured, then i just type "grunt observe", and all changes in less files was converted to one css file.
But here, i can't find starting point. I have installed Ruby, and i have tried various commands in command line, but nothing works.
For example, from compass page, i have tried :
$ cd /path/to/project
$ compass watch
But this does nothing, just show some info in command line, that compass is watching for changes...
So in general, how to continue this project without installed components to work with ?
For Using Sass and Compass,
You are required to Install Ruby, sass and compass,
Then move to the project folder path where the config.rb file lies,
Then run the compass watch here
you can see like the following on your terminal / bash / command prompt
>>> Compass is watching for changes. Press Ctrl-C to Stop.
After this If there is no css file created, You have to simply make some changes on one of the scss files or partial files(_filename) that you have imported to style.scss.
The link will guide you to proper installation and creating project folder setting up.
http://compass-style.org/install/
Installed Foundation 5 with Sass a couple of days ago. But, after:
foundation new test_grid
cd test_grid
compass watch
files, directories created by watch...
open index.html and there's no styling. (I also tried 'compass compile' and 'compass watch', but no changes.
The config.rb that compass uses shows:
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
And the app.scss shows:
#import "settings";
#import "foundation";
Looking at stylesheets/app.css it seems that the foundation.css file hasn't been imported.
Any ideas of what's going on? Could be a totally newbie problem...knocked my head against the wall and googled ad nauseam.
Based on a suggestion, I reinstalled compass, but still get the same.
Compass seems to be okay when watching:
emily#emily:~/sites/test_grids(master*)$ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
directory stylesheets
write stylesheets/app.css
and when I modify bower_components/foundation/scss/foundation.scss (insert p {font-size: 10rem;} it shows:
modified bower_components/foundation/scss/foundation.scss
write stylesheets/app.css
The refreshed index.html font size changes, but again, no foundation.css styling.
I was having this problem too and found the answer here:
https://stackoverflow.com/a/25560150/3990944
The latests Sass and Compass are not compatible. Try uninstalling and installing older versions. Worked for me. Details are in the post above.
You want to make changes in the _settings.scss or app.scss, not the files located in Bower components. See file descriptions here:
http://foundation.zurb.com/docs/sass-files.html
How to use
http://foundation.zurb.com/docs/using-sass.html
Try this out:
sudo gem uninstall compass 1.0.0
sudo gem uninstall sass 3.4.0
sudo gem install sass --version 3.2.9
sudo gem install compass --version 0.12.7
This method worked for me
I want to include breakpoint into my web project. I have SASS, Compass and breakpoint installed and I followed the installation guide for it, but it still dosen't seem to work correctly. Can anyone walk me through here what the errors might be.
The following code is in my config.rb file (located in project directory, main folder)
require 'breakpoint'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
The following code is located in style.scss (project/sass folder)
#import "breakpoint";
etc scss code...
Here is the error I get from LiveReload:
File to import not found or unreadable: compass.
Syntax error: File to import not found or unreadable: compass.
Load path: /private/var/folders/ln/lp7d050s191cgjw1ck1gnq_h0000gn/T
on line 4 of project/sass/style.scss
Use --trace for backtrace.
Compass extensions tend not to work (or work well) when compiling with a GUI app (such as LiveReload or CodeKit). Instead of using LiveReload for compiling and reloading, just use it for reloading and run your compilation through the command line. You should also put your project under Bundler version control to ensure that the gems you want to use are absolutely available. If you are having load issues, it's because your compiler can't find the gem. Compiling through the command line under Bundler control will ensure the gem is available.