我试图在我的spfx应用程序中使用devextreme数据网格，我无法加载webpack处理程序。请给我指一下正确的方向。关于如何在模块中包含处理程序，我尝试了不同的变体。按照前面的堆栈溢出问题的指导导出，但是没有一个帮助。
下面是我的gulpfile.js文件:'use strict';
const build = require('@microsoft/sp-build-web');
//const path = require('path');
module.exports = {
module: {
rules:[
{
test: /.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /.(woff|woff2|ttf|eot)$/,
use: 'file-loader?name=fonts/[name].[ext]!static'
}
]
}
}
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
build.initialize(require('gulp'));
build.tslintCmd.enabled = false;
我安装了css-loader, style-loader, url-loader和file-loader。下面是我的package.json
{
"name": "search-based-list-view-webpart",
"version": "0.0.2",
"private": true,
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@devexpress/dx-react-core": "^3.0.4",
"@devexpress/dx-react-grid": "^3.0.4",
"@devexpress/dx-react-grid-material-ui": "^3.0.4",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@microsoft/rush-stack-compiler-4.2": "^0.1.2",
"@microsoft/sp-core-library": "1.14.0",
"@microsoft/sp-lodash-subset": "1.14.0",
"@microsoft/sp-office-ui-fabric-core": "1.14.0",
"@microsoft/sp-property-pane": "1.14.0",
"@microsoft/sp-webpart-base": "1.14.0",
"@mui/material": "^5.9.0",
"@pnp/graph": "^3.4.1",
"@pnp/sp": "^3.4.1",
"@pnp/spfx-controls-react": "3.8.1",
"devextreme": "22.1.3",
"devextreme-react": "22.1.3",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"@microsoft/sp-build-web": "1.14.0",
"@microsoft/sp-module-interfaces": "1.14.0",
"@microsoft/sp-tslint-rules": "1.14.0",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"gulp": "~4.0.2",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1"
}
}
.tsx文件中,我试图导入css文件如下所示:
import 'devextreme/dist/css/dx.light.css';
无论我尝试什么，当我尝试做gulp serve
时，我得到以下错误Error - [webpack] 'dist':
./node_modules/devextreme/dist/css/icons/dxicons.woff2 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/devextreme/dist/css/dx.light.css (./node_modules/@microsoft/spfx-heft-plugins/node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./node_modules/devextreme/dist/css/dx.light.css) 4:38-70
@ ./node_modules/devextreme/dist/css/dx.light.css
@ ./lib/webparts/searchBasedListViewWebpart/components/SearchBasedListViewWebpart.js
@ ./lib/webparts/searchBasedListViewWebpart/SearchBasedListViewWebpartWebPart.js
我也有同样的问题。
只要扩展你的gulpfile.js:
...
// Font loader configuration for webfonts
const fontLoaderConfig = {
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
};
// Merge custom loader to web pack configuration
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(fontLoaderConfig);
return generatedConfiguration;
}
});
...
解决方案链接:
woff2文件中不支持的字体
如何在SPFx项目中捆绑和使用自定义web字体