web-dev-qa-db-ja.com

Postss-loaderがcss出力を縮小しない

CSSをcss-loaderにロードしてcss-modulesを使用する前に、webpackとpostcss-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"
  }
}

前もって感謝します。

javascriptwebpackpostcsspostcss-loadercssnano
8
Tijs

今後の読者のために：cssnanoプラグインを構成のpostcss-loaderに追加するだけで問題を解決しました。したがって、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
      }
    }
  ]
}
11
Tijs

私も同じ問題を抱えていますが、Tijsの解決策がうまくいきませんでした。

次のように最小限のpostcss.config.jsファイルがあります。

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

.scssファイルの私のwebconfigモジュールルールは次のとおりです。

{
  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
      }
    }],
  }]
}

webconfigファイルでプラグインを指定してもしなくても、それはとにかく機能せず、CSSを縮小しません。機能するautoprefixerのような他のプラグインを試します。

1
StefS