I have a task that first runs CSS files through postcss plugins and then through purifycss like this:
.pipe(postcss(processors))
.pipe(purify(['src/test/html/*.html']))
.pipe(gulp.dest(PLI.target.test.css));
However the CSS is not being purified. Anyone know why?
The actual task that is running the build can be found here: superfly-css-task-build
If you clone this project and run npm i && npm run test and then look in the target/test/css/index.css all the un used CSS is still contained in the file even though src/test/html/index.html is used as the purifycss filter.
Related
I am learning about sass and I am wondering how we should give a link in our CSS stylesheet. I know sass files are stored differently but should we address it like this:
<link rel="stylesheet" href="mystyle.css" />
and then add a link to mystyle.scss then?
TL;DR: You cant use precompiled Style in your DOM.
SASS is a scripting language written in Ruby. You must compiled first because by default your browser understand only CSS. If you want that your browser compile your SASS files your can use some Libraries which compile your style to CSS. For example: https://github.com/slymax/sass-link
But regular you compile your SASS File first on your machine and then you link only to the CSS.
SASS cannot be directly linked via a stylesheet. It is a CSS preprocessor and is compiled down to regular css. You'll wanna install sass using npm (npm i sass) and do npx sass --watch scss:css for it to compile. (here scss is the sass directory and css is the css directory, it may be different for you). If you do npm i sass -g you wont need to include the npx since you installed it globally. You can then simply link your css to your index.html.
In the end you're always connecting your .css file to your style sheet. Never the scss/sass file itself.
You could use the VSCode (or any other IDE) Sass compiler plugin. But I prefer to do it manually as the compilers sometimes result in bugs for me.
I personally do the following:
In your terminal enter the following to install in your project directory:
npm install sass --save(previously dart-sass)
npm install bootstrap --save
npm install autoprefixer
or in one line:
npm install sass bootstrap autoprefixer --save
Within your project root create a "scss" folder, and within that, a file named "styles.scss"
This will be the file from which all imported sass is compiled into your destination.css file.
Then, you must create a script in your package.json to the scripts. I use the following:
"compileSass": "sass --watch scss:public/css"
Please note that the --watch means that whenever you save your modified.
Please note that the public/css dictates where the compiled file will be saved relative to your scss folder you just created.
In a new tab in your terminal, start your compiler by entering
npm run compileSass
Or whatever name you gave to your script in the package.json file.
THEN when you link your CSS file as a stylesheet it will be the compiled CSS that was generated from your styles.scss.
You should put all the file path.
Exemple :
<link rel="stylesheet"href="C:\Users\Name\Documents\HTML & CSS\style.css" />
For sass it's easy : How to import SCSS files into HTML files
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
I got my one website on WordPress and had no code at all to be written myself. And now I decided to move one, write my own website, but stuck with some issues with Gulp after installing ("no command 'gulp' found") The most common reason met for Windows is the wrong PATH, and I've changed it. Any other thoughts? That's supposed to be just a starter kit for an auto page reload when HTML, CSS, JS is changed.
this sounds like you only have gulp installed inside your current project.
First Solution:
Simply install gulp-cli globally. This will allow you to use gulp command
note: gulp still need to be installed per project basis.
npm install -g gulp-cli
Second Solution:
in case you don't want to install gulp-cli globally, you can add it as your build script inside your package.json. And then you can run npm run build from your terminal.
{
"script": {
"build": "gulp"
}
}
So whats happening is when I edit a scss file and save, gulp task runs with no errors but excludes that files content in my main default.css.
I switch to another scss file, edit that and THAT one is now exluded but the previous gets compiled.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('scss', function () {
return gulp.src('assets/resources/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('watch', function () {
gulp.watch('assets/resources/**/*.scss', ['scss']);
});
gulp.task('default', ['scss', 'watch']);
No idea whats going on and not even sure if this is the right place to post this but im at my wits end.
Should also note that doing a normal sass watch from the command line works fine, no issues there.
Gulp 3.9.1
Gulp-sass 4.0.1
Node-sass 4.9.0
File structure if it helps
assets/css/default.css
assets/resources/default.scss
assets/resources/base/<scss files>
assets/resources/modules/<scss files>
So the problem was with gulp-sass.
Uninstalled it then installed gulp-ruby-sass, tweaked task based on the help file and it's working perfectly now
I'm constantly working on new web development projects that don't ever, in practice, need their node_modules folder when deploying. It would suit me much more if I was just able to create a small gulpfile.js for each project, rather than 6000+ files contained in the node_modules folder for every project, that are only ever used by me on this machine.
I only use Gulp to compile SASS and prefix and minify my CSS. I don't need to worry about any other type of deployment issues, but the documentation says I need both: Global and local copies of Gulp.
Gulp needs to be installed locally, but you can link the local install to a global install:
npm install --global gulp
npm link gulp
See also https://stackoverflow.com/a/30742196/451480