It's not finding my #import'ed files.
If I use //=require on them it won't keep track of the variables I'm defining in other files so #import is the only option.
I've even tried using the full physical path like #import "/Users//Sites/project/stylesheets/test.less"; and it still cannot find the file.
They are in the same directory...
It seems there's a weird issue with Sprockets + LESS.
I'm not using RAILS, just a basic rack server with sprockets...
Less::ParseError: 'activity.less' wasn't found. (in /Users/rountrjf/Sites/ce-platform/app/assets/stylesheets/app.less)
Anyone know how I can resolve this?
A quick fix I found was give the relative path of the file in import
eg:
#import "app/assets/stylesheets/app.less";
It worked for me.
Update: proper soultion which I found was :
use this sprockets-less gem
works like a charm no relative path required
check my example here
Are you naming your files .css.less or just .less? Try adding .css.less which is what I have found I needed to do with Rails Assets Pipeline (sprockets). Since you are not using rails, this solution might work for you too since you are using sprockets.
Related
In Wordpress, my main style.css file imports various sub-files, such as content.css, archive.css, product.css and so on:
#import url("content.css");
#import url("archive.css");
#import url("product.css");
Without success have I have been looking for a way - through browser console or online resource - to download "in a shot" a single CSS containing style.css plus all related #import files, without having to copy and paste all of them in a new file.
Do you know if there is a solution for this? Thank you.
You could use a CSS pre-processor such as LESS or Sass (SCSS), they come with many other features as well.
Depending on the editor you already use you might be able so simply install a package (like Easy LESS for Visual Studio Code), rename your style.css to style.less and be done.
Choosing and switching to a CSS pre-processor might however, depending on your circumstances, environment and experience, not be easy or straightforward at all.
I'd suggest just to copy paste them your css files into one. Using a tool for a simple task as this one can only result in bugs.
Sample app available for download which shows the issue:
https://github.com/chrillewoodz/ng-boilerplate/tree/universal
I'm trying to get angular universal to work but it throws error for a SCSS import in one of the components SCSS files:
#import './src/assets/styles/utils/_exports';
It works when running it normally without universal but when it runs with universal it treats the import as relative to the component and not root.
So the path becomes:
src/app/shared/components/breadcrumbs/src/assets/styles/utils
Instead of:
src/assets/styles/utils
How can I set the path so that it works in both scenarios?
I've done some digging but unable to find similar issues, the only issues that has come up is that SASS doesn't work properly with universal and AOT. Which would be a completely separate issue once I've managed to solve this one.
you have to check from the base which is "" in tsconfig.app.json file, so the path should be relative to this "baseUrl": "", path.if you need your path as "src/assets/styles/utils" you have to change "baseUrl": "/src" of "src/assets/styles/utils".can you please share your tsconfig.app.json as asset is parallel to it or may be your folder structure.As you have to check the your SCSS file relative to asset you want to access.
I'm trying to make a jekyll blog using foundation and sass, and I just can't seem to get the foundation sass to compile correctly. When I build jekyll, there are no errors, and the partial I wrote seems to load correctly, and foundation seems to import, but only the comments at the top.
My process so far was basically to run
npm install foundation-sites --save
move the foundation sass stuff out of the node_modules folder, and then include foundation in my scss file.
You can see the directory and the css file that is output in the following screenshots.
I'm kind of not sure what else I can try at this point any help would be appreciated! Thanks!
Edit: Here is a link to the branch and repo for this to see the code. https://github.com/samuraiseoul/kimchiChingu/tree/23-sass
Hmm.. it seems like all the partials imported in foundation.scss are just sass functions, mixins and variables. So there's no actual css output.
Alright so I figured it out. The problem is that I had to either include the foundation-everything mixin in my sass file or the specific modules I wanted.
just using #import 'foundation'; wasn't good enough, I had to also put #include foundation-everything; or list each component I wanted in case I didn't want everything.
I had similar issue even after adding
#include foundation-everything($flex: false);
I figured it out after updating my gulp-sass module.
I have the following set up:
d:\modules\base - This is where my CSS framework (Inuit CSS) and site theme lives. The idea is for others to be able to use this as an import into their sites main style.scss and write their own styles on top of this.
d:\sites\my-site - As described above, I will import the module\base into my site.
To do this I use
#import "D:\modules\base\style";
Which works... But for other developers, their module mite be on a different drive, or have a different folder structure. So I was wondering if there was any way to do the following:
#import "$module-path\style";
Then they could set their module path themselves in a config file or something similar.
I appreciate there may be other methods to make this easier, e.g. having it all in the same folder, but would be interested if there was a solution to this method.
Thanks
I managed to get around this by making a directory link in d:\sites\my-site
in CMD, type
mklink /D my-link-name D:\modules\base\stylesheets
this creates a link in the directory your in called "my-link-name" and points it to the module.
Then I just include this in my sites style.scss like so:
#import "my-link-name\style";
Just use a relative path to your import, e.g.:
#import '../../base/style';
I'm upgrading a Rails3.1 application to use the asset pipeline. I'm using less-rails gem to compile assets (before using asset pipeline, more plugin was used).
A few of existing less stylesheets reference other stylesheets in the #import directive with relative paths. There is were the problem arises, since the lookup via relative paths doesn't work.
Example:
first stylesheet: app/assets/stylesheets/shared/env.less
second stylesheet: app/assets/stylesheets/shared/colours.less
The first stylesheet is referencing the other one:
#import "colours.less";
This fails. It does start working when I modify the reference using asset helpers:
#import asset_path("colours.less")
Is this the only way to make the relative paths work? It would mean changing a lot of stylesheets references... or is the problem in my setup of less-rails and this should work?
EDIT:
Even using asset helpers doesn't work for me. The only way to get it working is by using paths starting in assets root, like this:
#import "shared/colours.less";
After some more research I found it is OK to use relative paths hence this should work. I found it is an open issue with less-rails gem:
https://github.com/metaskills/less-rails/pull/64
Hopefully we can solve this in short time.