I'm moving my workflow to use sourcemaps with Sass, and it was going well, but I'm having trouble with it overwriting my main.scss every time I make a change in Chrome Devtools.
My file structure is like this:
scss - main.scss
|- inc
|-_mixins.scss
|-_typo.scss
|- etc...
and main.scss contains multiple #import "inc/mixins"; lines, obviously each with different filenames.
I created a sourcemap, using sass --sourcemap scss/main.scss css/main.css and then started watching the files using sass --sourcemap --watch scss:css, (all found in this tut).
I've also mapped working files in Chrome Devtools.
It works initially, in that if I examine the elements in DevTools, I see the code in SCSS. If I edit a value, it overwrites my scss/main.scss with the contents of css/main.css, which is massively weird.
Anyone shed any light on this?
So, I figured it out.
I followed the tut to get this working, but had mapped the local files incorrectly.
If you are manually setting up SASS sourcemapping, you must be careful to map included files to the correct locations. Somehow I had one mapped to main.scss, and so it was overwriting it on changes.
Related
I'm building in WebStorm.
I have a main.scss witch references several partial files (names prefixed with _) via #use. I have a file watcher set up and everything works fine when I'm working in the main.scss - I make changes, they get compiled and are reflected in my build.
When I make change in a partial though they don't seem to trigger the file watcher. In order for the changes to show in the build I have to jump back to main.scss and make some small change that triggers the watcher and everything gets compiled. This is a bit of a pain to keep having to do but I've tried messing around with the watcher settings and have had no luck.
Can anyone suggest a way to trigger the file watcher when partial SCSS files are updated?
Thanks
Not a full answer as WebStorm just doesn't seem to want to play ball but in the end I set up webpack and am using the sass-loader which seems to work as desired and actually makes more sense as I'll usually be running webpack anyway.
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I'm using gulp-ruby-sass to compile my css and generate source maps for a site built on Jekyll. The source maps are being generated. When I inspect a style, a Sass partial is identified as the source of that style. But when I click on the filename, I'm taken to an empty window. I need my entire scss directory copied into the _site directory when the site is generated. But Jekyll ignores all files prefixed with an underscore, so all Sass partials are automatically excluded. I've tried adding, scss, scss/_sass_partial.scss, and scss/**/*.scss to the include property of Jekyll's _config.yml. This property is supposed to force inclusion of files that would otherwise be automatically excluded such as .htaccess. But this does not work for my Sass partials. Jekyll includes the partials only if the underscore is removed. Does anyone know a way of dealing with this?
This will work :
include:
- _sass_partial.scss
But you can also add a gulp task :
gulp.task('copy_sass', function(){
gulp.src('./sass/*.scss')
.pipe(gulp.dest('./_site/sass'))
});
I don't know why my filewatcher doesn't transpile certain scss files. I wanted to rename files that already existed to use them as partials. That worked fine for most of them but i couldn't rename all of them. When I tried to use "refactor->rename" there was a warning that the files would be used by another script but that was definitly not the case. I was not able to rename them in phpStorm so i renamed them in the directory manually. That worked but now no css files are created anymore. I tried to synchronize but that didn't help. My settings seems to be correct (see picture). Anyone had the same problem before and knows the solution?
When "Track only root files" option is on, the content of partials is merged into a single .css files when transpiling, so that a single css is generated instead of creating a separate css for each partial