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"
Related
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.
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?
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.
I wanted today to try scss support of yeoman.
I followed the procedure :
$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt server
And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.
So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console
You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.
I had the same issue, your main.scss file has issues with bootstrap css
I deleted the line ( 2. line )
#import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
and have no more issues. it compiles to main.css