Postcss-загрузчик не уменьшает вывод css

Я использую webpack и postcss-loader для автопрефикса и минимизации моего CSS, прежде чем загружать его в css-loader для использования css-модулей. У меня проблемы с уменьшением CSS. Изучение сгенерированного файла .js с помощью webpack показывает, что CSS не минимизирован с помощью cssnano (потому что я все еще вижу символы пробелов). Что я делаю неправильно?

Некоторые соответствующие файлы конфигурации:

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"
  }
}

Заранее спасибо.


webpack javascript postcss postcss-loader cssnano
person Tijs    schedule 27.08.2018    source источник

Ответы (1)


arrow_upward
14
arrow_downward

Для будущих читателей: я решил свою проблему, просто добавив плагин cssnano в postcss-loader в config. Таким образом, правило css выглядит следующим образом (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
      }
    }
  ]
}
person Tijs    schedule 28.08.2018
comment
Я думал, что расширенная предустановка cssnano сама выполняет автоприставку? - person jayarjo; 03.02.2019