如何解决错误:使用 webpack-spritesmith 在 webpack 中编译 less 时,无法读取 null 的属性“eval”
错误来自 webpack-spritesmith 插件生成的 LESS 文件:
ERROR in ./assets/less/main.less
Module build Failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build Failed (from ./node_modules/less-loader/dist/cjs.js):
@spritesheet-sprites:;
@spritesheet: 0px 0px '~img/generated/sprite.png' @spritesheet-sprites;
Cannot read property 'eval' of null
出于某种原因,spritesheet-sprites
变量似乎没有定义值。在将 Webpack 版本从 1.13 升级到 5.22(及其加载程序)后,我遇到了此错误。我尝试降级一些依赖项,例如 less、less-loader 和 webpack-spritesmith 插件本身,但似乎没有用。还检查了较新版本的 Webpack 及其加载程序是否以不同方式处理路径,没有结果。
我按照他们的官方文档编写了配置(用于 webpack 和插件),一切似乎都已到位,但通过在线查看资源,我找不到我的配置是否错误或包中是否存在不匹配的版本.
我的 webpack 配置:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SpritesmithPlugin = require('webpack-spritesmith');
const mainPath = path.join(__dirname,'./assets');
module.exports = {
mode: 'production',stats: 'verbose',resolve: {
extensions: ['.js'],alias: {
assets: mainPath,js: path.join(mainPath,'js'),less: path.join(mainPath,'less'),img: path.join(mainPath,'img'),fonts: path.join(mainPath,'fonts')
},},entry: ['./assets/index'],output: {
path: path.join(__dirname,'dist'),filename: '[name].js',publicPath: './',chunkFilename: '[id].[chunkhash].js'
},module: {
rules: [
{
test: /\.js?/,exclude: /(node_modules)/,include: path.join(__dirname,'assets'),use: ['babel-loader']
},{
test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,use: ['file-loader']
},{
test: /\.jpe?g$|\.gif$|\.png$/i,{
test: /\.less$/,use: [MiniCssExtractPlugin.loader,'style-loader','css-loader','less-loader'],],plugins: [
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname,'assets/img/sprite'),glob: '*.png'
},target: {
image: path.resolve(__dirname,'assets/img/generated/sprite.png'),css: path.resolve(__dirname,'assets/less/generated/sprite.less')
},apiOptions: {
cssImageRef: "~img/generated/sprite.png",generateSpriteName: function(filePath) {
return 'sprite-' + path.basename(filePath,'.png');
}
}
}),new MiniCssExtractPlugin({filename: 'style.css'})
]
};
package.json:
"devDependencies": {
"@babel/core": "^7.12.16","@babel/preset-env": "^7.12.16","babel-eslint": "7.0.0","babel-loader": "^8.2.2","cross-env": "3.0.0","css-loader": "^5.0.2","eslint": "3.7.0","eslint-plugin-babel": "3.3.0","eslint-plugin-react": "6.3.0","file-loader": "^6.2.0","less": "^3.0.0","less-loader": "^8.0.0","mini-css-extract-plugin": "^1.3.7","rimraf": "2.5.4","style-loader": "^2.0.0","unused-files-webpack-plugin": "^3.4.0","webpack": "^5.22.0","webpack-cli": "^4.5.0","webpack-dev-middleware": "1.8.3","webpack-hot-middleware": "2.12.2","webpack-spritesmith": "^1.1.0"
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。