Проблема с пост css обработкой - PullRequest
Новая
       19

Проблема с пост css обработкой

2 голосов
/ 08 февраля 2020

Мое локальное приложение использует библиотеку mapbox-gl из Mapbox. Я импортирую строку в моем скрипте 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 внедряется в полезную нагрузку , Мне интересно, связано ли это с проблемой.

Обратите внимание, что это происходит только при сборке, если я запускаю веб-сервер и live-код, проблема не существует.

1 Ответ

1 голос
/ 24 февраля 2020

Эта ошибка была исправлена ​​в последних версиях svgo. Попробуйте запустить npm list и посмотрите, какая версия svgo используется css-loader и postcss-loader. У меня тоже недавно была такая же проблема, и мне удалось ее исправить, обновив css-loader до последней версии (3.4.2).

...