So I'm a newbie trying to learn SASS/SCSS/Bootstrap. I'm working on VSCode and installed SASS and bootstrap via npm in the terminal. All was well and I was working on this particular project for a few days until SASS stopped compiling out of the blue. I noticed that if I make changes to my main style.css sheet it will be reflected in the browser, however any changes to the scss partials and it's not compiling to the main style.css sheet.
To complicate things further, I was on the package.json file and clicked on 'Debug' where it made it worse - now there's no styling at all. The style.css sheet somehow consists of
#use "custom";
#use components/buttons;
etc etc..
and
#use sections/navbar
#sections/intro-section
etc etc...
The Live Sass Compiler is working and is 'watching'.
I have Live Sass Compiler and Live Server installed as extensions. I'd appreciate any help as I was stuck on this the whole day!
I'm new here so I wasn't allowed to upload images directly.
screenshot 1
screenshot 2
screenshot 3
Are you compiling on your local machine with VSCode using LiveSassCompiler by Glenn Marks (glenn2223.live-sass)? If you are using ritwickdey.live-sass, try swapping it for Glenn's as the latter is no longer maintained I think. Then, try appending a .bak to the style.css and style.css.map to regenerate the CSS with the compiler.
Related
I'm learning Sass and working with a live Sass compiler on my vsCode, Mac OS.
When I break my Sass code into partials it messes up my code, turns the SCSS extensions in the folder to CSS. I can go to the status bar and turn it back to SCSS but then when I make any changes on my code it turns it back to CSS and breaks it, you can see by the image below some files have the Sass icon a some have the # icon who do I stop this from happening?
Can someone please tell me how to configure it so it stops doing that?
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
I'm just starting to play with SASS in Visual Studio. The question I have is that if I put my .scss file in the theme folder, the compiled CSS file will automatically be added to the site. The problem comes in that it generates a .css AND a .min.css file and BOTH are being applied to pages that use the theme.
Is there a way to have VS only add the .min.css automatically? I'd love to keep them in the theme folder and let VS handle linking everything automatically, but I don't want the stylesheet to be added twice. Or is there something else that is considered better/best practice that I should be doing with SASS files?
Are you using Web Essentials plugin to compile SASS? If yes, in its options, you can change it so when it compiles it can output min, css or either.
example for LESS (same for SASS):
Plus, even if VS is producing min and css files, it wouldn't make much difference since bundling will only use one file. You can just exclude certain files from the solution, and they will be ignored.
You could also look at build tools such as Gulp or Grunt to compile sass - they have much more options that you can apply.
Prestashop theme folder contains a SASS folder. Where I am having .scss files for my newly developing theme. Am clear in compiling sass to css files locally, but prestashop is not having any inbuilt sass compiler, so does it makes any sense in uploading the sass folder to the server???
it does only make sense if you're using css-maps so you can actually use the scss instead of the compiled css to see the right lines in the inspect-element-console.
otherwise you don't need it.
//Edit might sounded confusing, what i mean is: You can actually see your scss-lines if you're using css-maps (the map needs the source to your scss-file) where all scss-commands you did are linked to the compiled css. if you inspect an element while having this css-map and the scss on the server and all file-directories correct then you'll see the scss-commands instead of the compiled css-commands. it makes developing much easier.
I want my IDE to see Bootstrap files for CSS classes autocompletion and on-the-fly LESS compiling. But I don't want to store Bootstrap inside my project folder structure and copy libraries in each project. How can I make IDE know where is libs?
Some approaches I tried.
Using relative paths. #import '../../../../../Bootstrap 3/less/mixins'; does not look good. Moreover, despite import statement is correct (without red underlining), IDE does not "know" about imported mixins. When I just copy libraries, IDE "knows" about them.
Connect as JS libs. I see them in project files view. LESS syntax checker cannot locate them, no matter what path i specify. Import statement is underlined with red wavy line.
Now, I can use only copy and paste technique or use links (or directory junctions). I am not sure that this is correct way.
I tried this PhpStrom and PyCharm, but I suppose that WebStorm cannot resolve this problem too.
You can add a folder where your Bootstrap files are stored as additional content root to each of your projects (Settings/Directories, Add content root). See also WEB-7452