I am trying to include foundation from bower in my recent Wordpress project.
I am under underscores.js for a theme.
In the bottom of my styles.scss:
#import "../../../../../src/foundation-sites/assets/foundation.scss";
Then in my /src/foundation-sites/assets/foundation.scss:
#import ‘../scss/foundation';
#include foundation-everything;
where ../scss/foundation' is where myfoundation.scss` file is.
Yet still no CSS is included in the resulting compile.. only the header.
I've tried re-installing from bower, and the only changes I make are to assets/foundation.scss.
Even then, it seems weird to have to make changes to something in the bower install directory, but assets/foundation.scss is pointing to the wrong file.
What am I missing?
I managed to get this working by importing the foundation.scss file from the scss folder and using #include foundation-everything in my style.scss.
Related
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've built my portfolio site off of Github Pages. Now that I'm starting portfolio 2.0, I want to use Sass.
I've used Sass in the past but didn't have to set it up directly. So far I've installed Sass using gem install sass and have my file setup, but am not sure how to compile it properly.
File Structure:
styles.css
scss/
_banner.scss
Styles.css content:
#import 'scss/_banner';
Am I missing the compiling step somewhere? It is even possible to use Sass on Github Pages?
For my solution I replaced scss/_banner.scss with styles.scss, opting to not create partial files for a single page application.
Then all you have to do is run $ sass --watch css/styles.scss:css/styles.css in the terminal and your CSS will be compiled each time you save your Sass file. This command points your computer to which file to compile and to where.
Thanks to #dommmm for directing me to the solution with the youtube video in the question comments.
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/
I have DotLess 1.4.1 installed (Asp.Net 4.0).
My less directory structure is:
/assets/styles/*.less
I'm now looking at bootstrap and although I'll probably change the default directory structure, bootstrap will be inside its own folder. At the moment it is located:
/content/bootstrap/*.less
I've tried
#import "grid.less"
#import "/content/bootstrap/grid.less"
#import "../../content/bootstrap/grid.less
#import "./../../content/bootstrap/grid.less
Amongst many other variations.
I have a build event like this:
“$(SolutionDir)packages\dotless.1.4.1.0\tool\dotless.Compiler.exe” "$(ProjectDir)assets\styles\main.less” “$(ProjectDir)assets\styles\main.css”
Anyone experienced this kind of issue or have an idea as to how it can be solved?
Your problem is that dotless uses the current directory to look for imports even when the initial file is not in the current directory. If you're comfortable working with MSBuild files, you can switch the working directory for the exe call.
Can I compile scss from project folder created with foundation new project with sass?
Why js folder had only app.js file, should I move files from bower_components/foundation/jsto (root)/js or link to their folder?
Should user css settings includes in app.css or custom file that includes app.css?
In bootstrap sass files collected in one folder, why in foundation scss folder had only app.scss and other files in bower components.
When you install Foundation this way, you use the SCSS folder created that contains the _settings.scss & app.scss. The app.scss is what you tend to use as your base SCSS file to compile from so you'd include all your other SCSS files to this one. You can move this file to elsewhere if you please but move the config.rb with it and make sure the add_import_path works from where you move it to.
You don't need to move the files, everything in bower_components should never be touched or moved, they are there so they can be upgraded when necessary, you shouldn't have to touch base Foundation files.
I said before you should use that, but you could include the app.scss into a custom scss file but it's better to have control of the Foundation imports in 1 file, in my opinion.
For the same reason i mentioned in 2, so you don't touch them and Bower can easily update them if you require.