webpack - postcss 处理问题

Question

我的本​​地应用程序使用 Mapbox 的 mapbox-gl 库。我正在我的脚本中导入一行 import 'mapbox-gl/dist/mapbox-gl.css';

这是我的 Webpack 配置:

const { join } = require('path');
const { isProd, plugins } = require('./setup');
const ExtractText = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const uglify = require('./uglify');

const out = join(__dirname, '../dist');
const exclude = /(node_modules|bower_components|src\/lib)/;

module.exports = {
    mode: 'production',
    entry: {
        app: [ ... ]
    },
    optimization: {
        minimizer: isProd === true ? [ new UglifyJsPlugin(uglify) ] : [],
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.s?css$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true,
                },
            },
        }
    },
    node: {
        fs: 'empty'
    },
    output: {
        path: out,
        filename: '[name].[hash].js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /[\/\\]node_modules[\/\\]smooth-scroll[\/\\]dist[\/\\]js[\/\\]smooth-scroll\.js$/,
                loader: 'imports-loader?this=>window'
            },
            {
                test: /\.jsx?$/,
                exclude: exclude,
                loader: 'babel-loader',
            },
            {
                test: /\.(png)$/,
                loader: 'url-loader',
                query: {
                    mimetype: 'image/png'
                }
            },
            {
                test: /\.svg$/,
                use: [ 'svg-loader' ]
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                use: [ 'file-loader' ]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: [ 'url-loader?limit=100000' ]
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: isProd != true
                        }
                    },
                    'css-loader',
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass')
                        }
                    }
                ]
            }
        ]
    },
    plugins: plugins,
    devtool: !isProd && 'eval',
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        contentBase: out,
        port: process.env.PORT || 3004,
        historyApiFallback: true,
        compress: isProd,
        inline: !isProd,
        hot: !isProd
    }
};

这是我的版本:

    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",

我的错误是:

ERROR in ./node_modules/mapbox-gl/dist/mapbox-gl.css (./node_modules/css-loader!./node_modules/mapbox-gl/dist/mapbox-gl.css)
Module build failed (from ./node_modules/css-loader/index.js):
TypeError: Cannot read property 'toFixed' of undefined
    at strongRound (/Users/derp/Projects/compass/public/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:766:21)
    at /Users/derp/Projects/compass/public/node_modules/postcss-svgo/node_modules/svgo/plugins/convertPathData.js:424:17

以下是正在处理的确切 CSS 文件:https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.7.0/mapbox-gl.css

您可以看到 SVG+XML 被嵌入到负载中。我想知道这是否与问题有关。

请注意，这仅在我构建时发生，如果我运行 Web 服务器并实时编码，则该问题不存在。

Answer 1

此错误已在 svgo 的最新版本中修复。尝试运行 npm list 并查看 css-loader 和 postcss-loader 使用的 svgo 版本>。我最近也遇到了同样的问题，通过将 css-loader 升级到最新版本 (3.4.2) 设法解决了这个问题。