I am using the command line sass --watch style.scss --style compressed to output a compressed CSS version of my SCSS style sheet.
Is there a way to output one expanded and one compressed CSS file, calling them respectively style.css and style.min.css?
I read the documentation without finding any information on this.
Your best bet would be to go with a task manager like Gulp or Grunt. Then you can specify two separate task for SASS and run grunt compile (using the Grunt example below). One for compressed and one for expanded. Otherwise I would just run another command on the terminal if you don't wan to mess with the config.
sass: {
expanded: {
options: {
style: 'expanded'
},
files: {
'css-expanded/*.css': 'sass/*.scss'
}
}
compressed: {
options: {
style: 'compressed'
}
files: {
'css-compressed/*.min.css': 'sass/*.scss'
}
}
grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);
You could run two terminal windows, each with one watcher in it. In one you would run
sass --watch style.scss:style.css --style nested
and in the other you would run
sass --watch style.scss:style.min.css --style compressed
I am unaware of a method to do this in one line.
Related
The goal is to configure a development environment for Tailwindcss v3 that supports #import and the removal of unused custom CSS classes.
I am not using a bundler. The project depends on just HTML, CSS, and JS i.e. no frameworks. If it's important, I use VS Code.
This is what I've tried.
Project's configuration:
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./src/**/*.{html,js}',
],
darkMode: 'media',
theme: {
extend: {
fontFamily: {
primary: '"Inter", sans-serif',
mono: ['"DM Mono"', ...defaultTheme.fontFamily.mono]
}
},
},
variants: {
extend: {}
},
plugins: [
// ...
]
};
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano')
]
/* styles.css*/
#import "tailwindcss/base";
#import "./custom-base-styles.css";
#import "tailwindcss/components";
#import "./custom-components.css";
#import "tailwindcss/utilities";
#import "./custom-utilities.css";
And this is my commend line:
$ npx tailwindcss -i ./src/css/styles.css -o ./css/styles.css --watch
Running just the above command, the setup does not inline the custom*.css files.
To achieve inlining, I also have to execute below, which on the surface, seems as if it should not be necessary.
$ npx postcss-cli './src/css/styles.css' -o './css/styles.css' -w
The end result is, Tailwindcss is not removing my unused custom styles, even when wrapped in the required #layer {}.
Step 5 here (Using PostCSS) just says to start your build process and does not offer any details.
Step 4 here (Tailwind CLI) only says to start the Tailwind CLI process.
So, what am I missing?
Do I need to use a bundler? If so, my preferred one is Rollup.
Other details:
autoprefixer:^10.4.0
cssnano:^5.0.10
postcss-cli:^9.0.2
postcss-import:^14.0.2
tailwindcss: "^3.0.7
Your intuition is correct. You do not need to run post-cli. PostCSS will execute once you update your Tailwind command.
You are missing the --postcss parameter.
Assuming that postcss.config.js is in your project's root, copy this to the script section of your package.json:
"tw": "tailwindcss -i ./src/css/styles.css -o ./css/styles.css --postcss postcss.config.js --watch"
Then from the command line at the project's root, run:
npm run tw
Note: with the above command, Tailwind will not rebuild the output file after the HTML file has been saved. You'll need to edit and save one of the CSS source files to initiate a rebuild. (Perhaps I still have a configuration problem?)
One other item, how are you testing for the removal of unused custom classes?
The mistake I made was just commenting out the HTML utilizing the custom class and then looking at the CSS output to see if the class was removed. But Tailwind (as documented somewhere) won't remove a class if the class appears anywhere in the markup, even in a commented line. If you're testing your build process, rename the class in the markup to anything, and then Tailwind will drop the custom class from the CSS output.
I have next situation.
I have core.scss file:
#import "fonts";
#import "custom_mixins";
#import "variables";
#import "base";
where I generally add all subfiles into one central.
Next with compass and gulp I compile this file:
gulp.task('compass', function() {
return gulp.src('css/src/core.scss')
.pipe(compass({
config_file: './config.rb',
css: 'css/dist',
sass: 'css/src'
}));
});
It works fine but here I have the problem. Each time I change for example one line in _variables.scss, this task recompiles all files to core.css file. It takes near 2s for one line change. Is there any way I can cache unchaged scss subfiles so that they wont be recompiled each time?
I know there is an option in Gulp using gulp-remember plugin to remember compiled unchanged css files before concatenating them. But here I have one css file created from one scss file...
I recommend you to use gulp-sass instead of compass. Compass is just a bunch of mixins and functions you can yourself integrate in your files without the need to compass dependency. Gulp-sass is faster than the sass compilation with Ruby because is using libsass, a port of Sass in C++.
First you'll need to install node-sass with NPM or Yarn and call it in your Gulpfile.
var gulp = require('gulp');
var sass = require('gulp-sass');
You'll change your compass task to the sass version:
gulp.task('sass', function() {
return gulp.src('css/src/core.scss')
.pipe(sass({
outputStyle: 'nested'
}).on('error', sass.logError))
.pipe(gulp.dest('css/dist')
});
Try, your compilation will probably be faster. You can change sass options, add sourcemaps and others options.
I have two sass build systems installed in my sublime text: sass and sass compressed. The problem is that sass compressed delete all my comments what is pretty bad for the native wordpress style because the first comment block is needed there.
Is it possible to create a build system for compressed css that preserves comments?
The current sass compressed build system looks like this:
{
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style", "compressed"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
Ok i got a pretty easy workaround. Newer versions of sass supporting the /*! Important comment */ syntax and leaving out this part in the compilation.
So simply add that ! to your comment block of the wordpress style.
Before I ask this question I want to point out that there are several similar questions posted here on StackOverflow, but none of them provide an accurate solution to the problem.
The problem
I have a workflow setup where Grunt combines and minifies multiple css files into one single file for a production environment.
The problem I'm facing is that font and image paths are breaking after running Grunt, as they're still pointing towards their existing relative file paths.
As an example:
Within static/homepage/startup/common-files/css/icon-font.css I have the following CSS rule:
#font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);
In my Gruntfile, I specify that I want the output of my minified css file to be style.min.css located at static/css/custom/homepage/. The problem with this is that the filepath changes, resulting in all font and image dependencies to no longer be found and return a 404 status in the browser.
What I've done to try solve this
I've figured that there are 2 options to fix this issue:
Copy all dependant files so that they're relative to the new directory wherestyle.min.css resides. The downside to this is that it could quickly become messy and ruin my project folder structure!
Change the paths manually by hand. But then again, what's the point in this? Grunt was designed for automating tasks!
Does anybody know how to fix this problem? I've wasted nearly 10 hours on this and I'm starting to give up. People have claimed to have fixed the issue over at the Github issue page, but nobody really says how they fixed it.
EDIT:
I've looked through the clean-css library source code and it seems that you can pass a relativeTo property to the minifier object. I've had a mess around with this but I'm still stuck. I'll report back if I get any further with this.
EDIT:
Okay I've finally found some documentation which explains what relativeTo (and other) properties do. I'm still stuck on exactly what my configuration should be for my file structure though....
relativeTo - path to resolve relative #import rules and URLs
root - path to resolve absolute #import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs
Here's my Grunt configuration file for reference:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
homepage: {
src: [
'static/homepage/startup/common-files/css/icon-font.css',
'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
'static/homepage/startup/flat-ui/css/flat-ui.css',
'static/homepage/static/css/style.css'
],
dest: 'static/css/custom/homepage/compiled.css',
}
},
cssmin: {
homepage: {
src: 'static/css/custom/homepage/compiled.css',
dest: 'static/css/custom/homepage/style.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-css-url-rewrite");
grunt.registerTask('build', ['concat', 'cssmin']);
grunt.registerTask('default', ["build"]);
};
Thanks.
Create a less file in static/css/custom/homepage as styles.less
#import your css relatively:
#import "../../../homepage/startup/common-files/css/icon-font.css";
#import "../../../homepage/startup/flat-ui/bootstrap/css/bootstrap.css";
#import "../../../homepage/startup/flat-ui/css/flat-ui.css";
#import "../../../homepage/static/css/style.css";
Then in your gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
less: {
dist: {
options: {
compress: true,
sourceMap: false,
// Add any other path/to/fonts here
paths: ['static/homepage/startup/common-files']
},
files: {
'public/css/dist/style.min.css': 'public/css/default/styles.less'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-css-url-rewrite");
grunt.registerTask('build', ["less:dist"]);
grunt.registerTask('default', ["build"]);
};
Compass has a lovely command that will watch and compile all scss in a given directory:
compass watch *foldername*
However, the Ruby-based compass is kind of slow and the C-based SASSC, wrapped in the form of node-sass, is much faster. Thing is, I haven't been able to replicate this seemingly simple feature using node-sass.
I followed the directions given here: http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/, which do a great job of setting up node-sass with grunt to watch for file changes, but it doesn't seem to support watching and converting an entire folder, agnostic of the file names within.
I've tried changing the
sass: {
dist: {
files: {
'css/styles.css': 'sass/styles.scss'
}
}
}
values to the folders, amongst many other things, and nothing seems to work. I'll admit that I don't really know anything about grunt. Is there a way to replicate
compass watch *folder*
or
sass --watch *folder*:*folder*
that I haven't tried, or does this not exist?
Yaniv was on the right track, but the magic seemed to be in "expand". Here's what ended up working:
sass: {
dist: {
files: [{
expand: true,
src: ['sitecontent/**/*.{scss,sass}'],
ext: '.css'
}]
}
}
This compiles all sass files in the sitecontent folder and all subfolders and puts the css next to the sass file - it doesn't compile them to some other folder.
You will need to use grunt-sass in combination with grunt-contrib-watch to get the same affect. The ruby version uses a separate gem to accomplish the file watching functionality, so you can imagine how difficult that is to do cross platform in C++.
You can use something like this:
sass: {
dist: {
files: [{
src: ['*.scss'],
dest: '../public',
ext: '.css'
}]
}
}
Hope that was what you were looking for