I'm having issues loading the original stylesheet (CSS file) into my style guide. The gulp plugin is gulp-livingcss and everything is working fine except the options.
I'm calling style-guide via a gulp-watch and the output is an index.html file that renders as expected (except the original CSS file is not being referenced). I'm not getting any errors when I run the script either.
Here's my gulp snippet:
gulp.task('style-guide', function () {
gulp.src('./app/temp/styles/styles.css')
.pipe(livingcss({
loadcss: true
}))
.pipe(gulp.dest('./app/style-guide'))
});
And here's the documentation from this page:
https://github.com/straker/livingcss#options
This is the gulp-livingcss page
https://github.com/straker/gulp-livingcss
loadcss - If the style guide should load the css files that were used to generate it. The style guide will not move the styles to the output directory but will merely link to the styles in their current directory (so relative paths from the styles still work). Defaults to true.
Thanks in advance
Related
I have a application which uses app.css in index.html. This app.css is the output css file from multiple SCSS files.
While inspecting an element to find css of that element, how can I know from which SCSS file is that style from?
You can use SASS Source Mapping. This will let you display the exact .scss file in your browser inspector.
Adding a flag to Sass's command line tool:
$ sass sass/screen.scss:stylesheets/screen.css --sourcemap
If you look in your output folder after running that command, you'll notice that a comment has been added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
Hope this helps!
As you've shown no code, i'll assume... you're using compass to compile? In this case you can use the ruby to sourcemap your files for you.
This can be done like so:
# Enable CSS source maps for development
sourcemap = true
This can be added to your rubyfile.
If you're using gulp or grunt you can use:
https://www.npmjs.com/package/grunt-concat-sourcemap
or
https://www.npmjs.com/package/gulp-concat-sourcemap
or if you're using sass:
http://thesassway.com/intermediate/using-source-maps-with-sass
when using SASS and concatenating my files using gulp, and inspecting element I am not able to see where the css is coming from. The chrome Dev Tools does not specify a line and file number for the CSS.
I have a main file main.scss in which I am importing 2 different files as such
#import "test1";
#import "test2";
In each of those files I have one line of code for testing,
// test1.scss
.test{
background: #ccc;
}
// test2.scss
.test{
background:#red;
}
Below is my gulp code to produce the output file.
gulp.task("css:vendorTest", ["clean:vendorTestCss"], function () {
gulp.src([
"Content/Styles/main.scss"
])
.pipe(sass())
.pipe(sourcemaps.init()) // gulp-sourcemaps
.pipe(concat("vendorTest.min.css")) // gulp-concat, simply brings them to one file.
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.cssDest));
});
When I inspect element on
this is what I see in chrome dev tools.
When I click on the link "main.scss:4" link goes to the main.scss css reference page, but I am not able to see any line numbers or the original file such as test2.scss from which it is originally coming from.
This is a big problem when used on the actual site, because the compiled file ends up having 16,000 lines of css and there is no way to find the css selectors origination.
I cant tell if this is an issue with how I am setting up sourcemaps, or if it is chrome dev tools? any suggestion would help, thanks!
For that you need a sourcemap file.
I use the koala app for converting sass to css and in that, there is a option to create .map file
relevant screenshot
We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:
...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({
outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...
Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:
Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.
Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces.
I had a the same problem. I had to scratch my head for a whole day to figure it out the problem and make my sass/scss editable in the browser.Here it goes:
1.) Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code.
i.e we can refer the the exact line which caused our compiled css rule but not edit it
2.) Chrome does it right by immediately replacing your scss rules with compiled css because chrome works with css. It doesn't compile your scss.
Also When you make any change to the css rule, this rule is also modified in the source file (.css ) also in chrome sources tab. That means the changes we make in the inspector are directly mapped with our css files.
For eg: when I change some property in the inspector it is also changed in the css source file.
Initially
Inspector
Source File
After Changing the property
Inspector
Source File
3.) Regarding Firefox, you might be thinking its working in the case of firefox but i think its a bit misleading. Its misleading because firefox doesn't change anything in any source file ( neither css nor scss ) so we don't know what they actually did, whether they actually compiled our scss file or they used css under the hood.
When I say source files it means files present in the source panel of the chrome and style editor in the firefox
4.) Finally, If you really want to edit you sass/scss files on the fly in the source panel of the chrome you've got to look into chrome workspaces. But then again you wont be able to make changes to scss rules properties in the inspect elements tab.
** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )
For example - I added /slots and put all of the contents of the website there but it is showing as a directory tree not as the functioning website.
http://sharedsquared.org/slots/
I have done this before successfully, I thought I just added the folder to the directory and it worked.
Your CSS and JS code are not loading. In Chrome, open developer tools, and see the Javascript console. You're getting 3 404 errors. Your application is in a folder /slots, change the path to your css and js files to:
/slots/Content/reset.css
/slots/Content/slots.css
/slots/scripts/slots.js
or:
./Content/reset.css
./Content/slots.css
./scripts/slots.js
-Jim
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/