I have a project where the basic asset folder structure looks like this:
/css
/css/sass
/js
/images
When I compile the SASS files, it places them into the css folder above. I do it this way to try and keep my directory structure logical and simple.
I'm using relative paths in my SASS files to link to images:
background: url(../images/foobar.png);
However, since the path is relative from the CSS directory, PHPStorm flags it as an error.
Is there any way to configure PHPStorm to be able to recognise assets from a destination path, and not just directly from the SASS file?
Replace:
background: url(../images/foobar.png);
With:
background: image-url('foobar.png');
To use the compass image-url() function. The inspection errors from PHPStorm will then disappear, and compass will automatically generate the correct path based on the image resource root.
Related
Folder structure:
Error description:
Sass version:
ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.
OS: MX Linux.
Sass is able to compile my code just fine if i don't use #use or #import.
Try importing like below with a relative path:
#use ./abstracts/resets
Here is an overview of how Sass imports files:
Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; #import "variables" will automatically load variables.scss, variables.sass, or variables.css.
⚠️ Heads up
To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use #import "susy" to load node_modules/susy/sass/susy.scss.
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
💡 Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
I have the following 4 files:
/src/images/image.png
/src/scss/main.scss
/src/scss/test/test.scss
/src/js/entry.js
In main.scss I have the following code:
#import './test/test.scss';
In 'test.scss' I have the following code:
.test {
background-image: url(../../images/image.png);
}
And in 'entry.js' I have the following code:
import './../scss/main.scss'
When I try to build this project with webpack, I get an error, that the image.png file can not be resolved. It appears, that when I build this project, test.scss thinks that it's relative folder is /src/scss/. If I change ../../images/image.png to ../images/image.png everything works correctly.
Is there any way to tell webpack or sass-loader to threat every imported file, as a separate file, and always use paths relative to the currently opened file? Or is there any way to specify paths from the root folder of my application (/src in this case)?
Im my project I have a main SASS file in the root. I also have a folder with _other.sass and icon.png in it.
main.sass
folder/_other.sass
folder/icon.png
My main SASS file includes my other SASS file:
In main.sass:
#include 'folder/other'
In _other.sass:
div {
background: url(icon.png);
}
Should the path to the image resolve correctly in this case? From the point of view of _other.sass the path is correct, but its not correct relative to main.sass.
Since all the compiled code will be included in your final *.css file, all urls must be relative to that resulting *.css file. In the code you have posted, the url is assigned as regular css code, so it wont be transformed in any way.
If you would use compass, what is a great extension to sass, you can use the provided functions, f. i. those to generate the needed urls. With compass you can configure all the base paths and the stuff alike, sass itself wont do that for you.
I have a mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
Im really new to Yeoman, I just tried it yesterday and I'm not sure where to do some configurations.
My problem is that the minified vendor CSS (AKA Bootstrap) is trying to get the fonts from the ROOT of my server
my structure is like this:
Here are my production files
htdocs/laravel/public/dist
the fonts are located in
dist/fonts
BUT, if I look in the minified vendor css file, the fonts url is set to
/bower_components/bootstrap/dist/fonts/
which means is looking in the htdocs folder, and I know it this because I copied my assets in the htdocs and tn works...
How do I configure Grunt so the url points to the dist/fonts and Not to the root???
I've checked the Gruntfile.js and I can't find where is it
I came across the exact same problem yesterday.
I found out that this pull request is fixing the issue:
https://github.com/cebor/generator-angular/commit/c6d5ee67e108a0699f95c78702cb1939233226a8
What I did to fix it in my project was commenting out the following lines of code. According to the pull request this cssmin does nothing but replace relative paths by absolute paths.
// The following *-min tasks produce minified files in the dist folder
cssmin: {
options: {
root: '<%%= yeoman.app %>'
}
},
The a grunt build uses the correct path, which is "../fonts"