我的本地应用程序使用 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 服务器并实时编码,则该问题不存在。
最佳答案
此错误已在 svgo
的最新版本中修复。尝试运行 npm list
并查看 css-loader
和 postcss-loader
使用的 svgo
版本>。我最近也遇到了同样的问题,通过将 css-loader
升级到最新版本 (3.4.2) 设法解决了这个问题。
关于webpack - postcss 处理问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60122210/