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)?
Related
I'm taking my first steps in PhpStorm and SASS. I went to File > Settings > File Watcher and I added SCSS
This is my current configuration:
Program: C:\Ruby23\bin\scss.bat
Arguments: --no-cache --update $FileName$:$FileParentDir$\$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileParentDir$\$FileNameWithoutExtension$.css
And it's working in the following way. Given the structure:
/mysite
/sass
1.scss
2.scss
3.scss
when I add a SCSS file to /sass it generates .css and .css.map files inside /mysite. However, I want to generate just one CSS file inside /mysite and avoid the map files. How can I do this?
if you have a primary SCSS file that imports other files (partials, their names usually start with underscore), you just need to make sure that 'Track only root files' is enabled in File watcher settings to get the output merged into a single .css
If you don't like .map files being created, pass --sourcemap=none to compiler
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 want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
#import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the #import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it
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"
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.