I am having issue trying to refer from a less file another less file using absolute syntax:
Less file A with location
$find `pwd` -name auth0.less
/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/auth0.less
imports Less file B
#import '/bootstrap/less/so_colors.less';
Now, the so_colors.less has location
find `pwd` -name so_colors.less
/Users/panos/dcimsupport/struxureon/auth0/src/main/resources/bootstrap/less/so_colors.less
The above fails with
java.io.FileNotFoundException: File /Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/bootstrap/less/so_colors.less
It seems that lesscss is like jailed to the css folder. I know that if I import as ../bootstrap/.....less it will work but then I have to go as up in directories as required which i'd rather not. Is there some other solution to that? There is limitation though, that bootstrap folder cannot be under css folder
I have used both
<groupId>biz.gabrys.maven.plugins</groupId>
<artifactId>lesscss-maven-plugin</artifactId>
and
<groupId>org.lesscss</groupId>
<artifactId>lesscss-maven-plugin</artifactId>
with configuration such as
<configuration>
<sourceDirectory>${project.basedir}/src/main/resources</sourceDirectory>
<outputDirectory>${project.basedir}/target/classes/resources</outputDirectory>
<compress>true</compress>
<includes>
<include>css/**/*.less</include>
<include>layouts/**/*.less</include>
<include>page/**/*.less</include>
<include>pages/**/*.less</include>
</includes>
How plugins works
The biz.gabrys.maven.plugins plugin treats the path /bootstrap/less/so_colors.less as an absolute. It does not set the sourceDirectory as a root, so it is looking for /bootstrap/less/so_colors.less instead of /Users/panos/dcimsupport/struxureon/auth0/src/main/resources/bootstrap/less/so_colors.less. That file does not exist so the plugin uses fallback and treats it as a relative to /Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/auth0.less. That is the reason why it is looking for /Users/panos/dcimsupport/struxureon/auth0/src/main/resources/css/bootstrap/less/so_colors.less.
The org.lesscss plugin works similar.
Your idea for improvement
I can try to add such improvement to my plugin, but first I need finish some migration process. Unfortunately this means that I can release that improvement not in the near future (e.g. at the end of 2016).
The org.lesscss plugin is not supported by the author and no one else.
Solution
For now you can only use relative paths with ../.
Related
I'm trying to access the logo image which is in public folder while my css folder is in src. I'm also using sass and I took into consideration that we need to write the path relatively to css file - not sass.
I tried different ways - with absolute path, with quotes and without - just hoped that maybe something will work.
I found someone's code https://codesandbox.io/s/musing-rosalind-21lsd?file=/src/App.js and played with it - I created same conditions as I have and it worked, but when I go back to my project it doesn't.
I'm using background-image: url('/logo.swg'), and it says Error: Can't resolve '/logo.swg'.
I'm aware of ejecting and webpack configuration changes, also I know that if I change the css and sass folders' path moving it outside of src it may theoretically work (with an absolute path I guess - since React does not allow us to refer to files outside of src directory).
I'm wondering if something changed in React, does anyone know? It works when I write the url as inline style, and it works when I import it in js files.
Thanks in advance.
versions:
react^17.0.1
react-scripts^4.0.1
create-react-app^4.0.2
You can use the following list as quick reference:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
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.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)
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.