web-dev-qa-db-fra.com

Postcss-loader ne réduit pas la sortie css

J'utilise webpack et postcss-loader pour auto-préfixer et minimiser mon CSS, avant de le charger dans css-loader pour utiliser les modules css. J'ai du mal à réduire la CSS. L'examen du fichier .js émis par webpack montre que le CSS n'est pas minifié avec cssnano (car je peux toujours voir les espaces). Qu'est-ce que je fais mal?

Quelques fichiers de configuration pertinents:

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

var postCompileScript = require('./postCompile');

module.exports = {
  entry: './src/popup.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { 
            loader: 'css-loader', 
            options: { 
              modules: true,
              localIdentName: '[local]__[hash:base64:6]',
              importLoaders: 1,
              minimize: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')({})
              ],
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production',
  resolve: {
    alias: {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    },
    extensions: ['.js', '.jsx']
  }
};

postcss.config.js:

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

package.json

{
  "name": "REDACTED",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./webpack.config.js",
    "deploy": "node ftp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.0",
    "ftp": "^0.3.10",
    "post-compile-webpack-plugin": "^0.1.2",
    "postcss-loader": "^3.0.0",
    "prepend-file": "^1.3.1",
    "style-loader": "^0.22.1",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "iframe-resizer": "^3.6.1",
    "js-cookie": "^2.2.0",
    "npm": "^6.4.0",
    "preact": "^8.3.1",
    "preact-compat": "^3.18.3",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-iframe-resizer-super": "^0.2.0"
  }
}

Merci d'avance.

javascriptwebpackpostcsspostcss-loadercssnano
8
Tijs

Pour tous les futurs lecteurs: J'ai résolu mon problème en ajoutant simplement le plugin cssnano au postcss-loader dans la config. Ainsi, la règle css est la suivante (webpack.config.js):

{
  test: /\.css$/,
  use: [
    'style-loader',
    { 
      loader: 'css-loader', 
      options: { 
        modules: true,
        localIdentName: '[local]__[hash:base64:6]',
        importLoaders: 1,
        minimize: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('autoprefixer')({}),
          require('cssnano')({ preset: 'default' })
        ],
        minimize: true
      }
    }
  ]
}
11
Tijs

J'ai le même problème mais la solution de Tijs n'a pas fonctionné pour moi.

J'ai un fichier postcss.config.js qui est aussi minimal que celui-ci:

module.exports = ({ env }) => {
  return ({
    plugins: [
      require('cssnano')({ safe: true })
    ],
  });
}

ma règle de module webconfig pour les fichiers .scss est la suivante:

{
  test: /\.scss$/,
  oneOf: [{
    resourceQuery: /^\?raw$/,
    use: [MiniCssExtractPlugin.loader, {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        camelCase: false,
        localIdentName: '[local]',
      },
    }, 'sass-loader', {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('cssnano')({ safe: true })
        ],
        minimize: true
      }
    }],
  }, {
    use: [MiniCssExtractPlugin.loader, {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        camelCase: true,
        localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
      },
    }, 'sass-loader', {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('cssnano')({ safe: true })
        ],
        minimize: true
      }
    }],
  }]
}

avec ou sans spécifier les plugins dans le fichier webconfig, cela ne fonctionne pas de toute façon et cela ne minimise pas le css. Essayer d'autres plugins comme autoprefixer ça marche.

1
StefS