I am using the latest version of H5BP along with their Ant Build Script and am having a hard time getting the CSS files to combine/concatenate when I run the build script. I am looking to combine the normalize.css and main.css into one file. I have tried adding the following to the project.properties file with no such luck:
file.stylesheets = normalize.css
I have also tried:
file.stylesheets = normalize.css,main.css
Any help would be much appreciated. Thanks
You have to set
file.root.stylesheet = normalize.css
then
file.stylesheets = normalize.css,main.css
in project.properties
Related
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.
While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.
With webpack you may like to use mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Please look at the documentation for more info
https://webpack.js.org/plugins/mini-css-extract-plugin/
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
I'm trying to make a jekyll blog using foundation and sass, and I just can't seem to get the foundation sass to compile correctly. When I build jekyll, there are no errors, and the partial I wrote seems to load correctly, and foundation seems to import, but only the comments at the top.
My process so far was basically to run
npm install foundation-sites --save
move the foundation sass stuff out of the node_modules folder, and then include foundation in my scss file.
You can see the directory and the css file that is output in the following screenshots.
I'm kind of not sure what else I can try at this point any help would be appreciated! Thanks!
Edit: Here is a link to the branch and repo for this to see the code. https://github.com/samuraiseoul/kimchiChingu/tree/23-sass
Hmm.. it seems like all the partials imported in foundation.scss are just sass functions, mixins and variables. So there's no actual css output.
Alright so I figured it out. The problem is that I had to either include the foundation-everything mixin in my sass file or the specific modules I wanted.
just using #import 'foundation'; wasn't good enough, I had to also put #include foundation-everything; or list each component I wanted in case I didn't want everything.
I had similar issue even after adding
#include foundation-everything($flex: false);
I figured it out after updating my gulp-sass module.
I understand that H5BP build script (actually I'm using Node version btw) concatenates separated CSS files if putting #import in style.css.
Now I don't understand why the build script keeps imported (separated) CSS files in publish directory and why not remove them... They should be useless anymore! Additionally, I have to write #import right after the first line in style.css to load them properly, but style.css seems that something I should write my own styles after primary styles around line 217...
Can someone tell me what the best way to create website with separated CSSs and to concatenates them to style.css properly?
Thanks in advance.
You can use Grunt.js to concatenate multiple css files easily.
Please see my build script at the following link which should give you what you want:
How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)