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.
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 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.
I've got a Meteor project with the following file structure:
.meteor
client
dashboard
dashboard.scss
client.scss
My basic sass file is client.scss that resides in client folder.
If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.
Should I add settings to the sass compiler to get this working?
If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with Sass.
In your case, your folder and file structure should be changed to:
.meteor
client
dashboard
_dashboard.scss
client.scss
And then you should be able to use an #import statement to include _dashboard.scss in client.scss like so:
#import 'dashboard'
If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.
Hope that helps!
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder