Questions tagged [cssnano]
22 questions
12
votes
1 answer
Postcss-loader not minifying css output
I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano…
Tijs
- 1,257
- 1
- 8
- 13
3
votes
3 answers
Angular ionic build: Cannot read property 'toLowerCase' of undefined postcss
I'm trying to build my application, but I'm getting this error from Postcss.
Note: the file on '/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css' does not exist.
[error] TypeError: Cannot read property 'toLowerCase' of undefined
at…
Vitor Kevin
- 785
- 7
- 16
3
votes
0 answers
Autoprefixer not using "grid: autoplace" with cssnano and postcss
We are using postcss with cssnano and autoprefixer. My problem is that postcss does not use the "grid: autoplace" in my postcss.config.js.
This is my postcss.config.js:
const cssnano = require('cssnano');
const mqpacker =…
W4ldi
- 644
- 5
- 11
2
votes
1 answer
Angular 11/CSS minification: How to prevent conversion of rgba to 8 digit hex code during css minification to support older chrome
We've a web app that's developed in Angular 11(cli V11.2.14) & Asp.net core and running fine, now needs to be supported in chrome older version(browser version 60).
I came across css issues mainly related to elements with color & opacity like for…
mv_05
- 109
- 12
2
votes
1 answer
Cssnano doesn't remove duplicates
I have a React web application where i use CSS modules. I am using Webpack to build the application.
Related part from the webpack.config.js :
{
test: /\.css$/,
use: extractCSS.extract(
{
fallback: 'style-loader',
use: [{
…
Shanaka Rusith
- 421
- 1
- 4
- 19
2
votes
1 answer
How do I add cssnano optimization rules in vue-cli 3?
I am trying to add cssnano optimization rules but with vue-cli, it doesn't seem to work. I added the following script in vue.config.js:
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
…
Ernie
- 21
- 3
2
votes
1 answer
Css minification not working (gulp + cssnano)
I have a very basic gulpfile set up like this:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();
var useref =…
onerkript
- 57
- 11
2
votes
1 answer
Minify multiple input file with postcss
I installed cssnano following these step: http://cssnano.co/guides/getting-started/
Into the root of my project i ran:
npm install cssnano --save-dev
After i installed postcss-cli:
npm install postcss-cli --global
Finally i created…
bobc82
- 497
- 7
- 17
2
votes
1 answer
gulp-postcss: conditional options (optimizations)
I learned the list of cssnano optimizations: it includes autoprefixer (not default), cssnano-util-raw-cache, etc.
Next I look the gulp-postcss documentation: it has the following example:
var postcss = require('gulp-postcss');
var gulp =…
Takeshi Tokugawa YD
- 670
- 5
- 40
- 124
2
votes
0 answers
Retaining empty/unused classes with CSS Loader
I am building a React application through Webpack 2, generating CSS through SASS-loader and CSS-loader. Here is my Webpack 2 configuration:
loaders: [
{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
…
Prusprus
- 7,987
- 9
- 42
- 57
2
votes
0 answers
gulp postcss cssnano does not combine the same selector when it is not next to it
Gulp in postcss with cssnano combine the same selector when the selector next to it but unfortunately it does not combine the selector when it is not next to it.
It works very well when selectors are next to it
.box {
color: blue;
}
.box {
…
Mo.
- 26,306
- 36
- 159
- 225
2
votes
1 answer
cssnano is reordering overridden properties
I am using less, postcss and cssnano (version 3.7.3). In less, I am using classes which inherit from a shared base and overriding some of the properties when needed. I am finding that cssnano is reordering the inherited\overridden properties causing…
daw
- 1,959
- 1
- 20
- 25
1
vote
0 answers
GRUNT: grunt-postcss not executing cssnano when used together with sass - if scss file long
I am using both the sass parser and gruntpostcss with cssnano on watch. cssnano` is parsing the file just fine if its a short file, but it my scss/css file gets long css file, the it is not parsing the file. Anyone knows why that is and how to fix…
ink
- 223
- 5
- 13
1
vote
1 answer
Optimizing CSS with cssnano advanced transforms using Gulp + PostCSS
My current working gulpfile.js:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
cssnano()
];
…
marko-36
- 1,309
- 3
- 23
- 38
1
vote
3 answers
How to configure cssnano for CSS minification?
I am trying to configure cssnano plugin for the postcss-loader, which minifies CSS, very similar, as described here.
Webpack config:
...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,…
Daniel
- 1,431
- 2
- 16
- 36