Я работаю над приложением Magento WPA Studio, и по какой-то причине у меня возникают трудности с импортом шрифтов в мой css файл.
Ошибка:
Вам может понадобиться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders
Файл конфигурации Webpack:
const {
configureWebpack,
graphQL: { getMediaURL, getUnionAndInterfaceTypes }
} = require('@magento/pwa-buildpack');
const { DefinePlugin } = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = async env => {
const mediaUrl = await getMediaURL();
global.MAGENTO_MEDIA_BACKEND_URL = mediaUrl;
const unionAndInterfaceTypes = await getUnionAndInterfaceTypes();
const config = await configureWebpack({
context: __dirname,
vendor: [
'@apollo/react-hooks',
'apollo-cache-inmemory',
'apollo-cache-persist',
'apollo-client',
'apollo-link-context',
'apollo-link-http',
'informed',
'react',
'react-dom',
'react-feather',
'react-redux',
'react-router-dom',
'redux',
'redux-actions',
'redux-thunk'
],
special: {
'react-feather': {
esModules: true
},
'@magento/peregrine': {
esModules: true,
cssModules: true
},
'@magento/venia-ui': {
cssModules: true,
esModules: true,
graphqlQueries: true,
rootComponents: true,
upward: true
}
},
env
});
/**
* configureWebpack() returns a regular Webpack configuration object.
* You can customize the build by mutating the object here, as in
* this example. Since it's a regular Webpack configuration, the object
* supports the `module.noParse` option in Webpack, documented here:
* https://webpack.js.org/configuration/module/#modulenoparse
*/
config.module.noParse = [/braintree\-web\-drop\-in/];
config.plugins = [
...config.plugins,
new DefinePlugin({
/**
* Make sure to add the same constants to
* the globals object in jest.config.js.
*/
UNION_AND_INTERFACE_TYPES: JSON.stringify(unionAndInterfaceTypes),
STORE_NAME: JSON.stringify('Venia')
}),
new HTMLWebpackPlugin({
filename: 'index.html',
template: './template.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
];
return config;
};
пакет. json:
{
"name": "@magento/venia-concept",
"version": "6.0.1",
"publishConfig": {
"access": "public"
},
"description": "Venia PWA Concept Storefront for Magento 2",
"main": "src/index.js",
"browser": {
"@magento/venia-drivers": "src/drivers"
},
"scripts": {
"build": "yarn run build:prod",
"build:analyze": "yarn run clean && mkdir dist && webpack -p --profile --no-progress --env.mode production --json > dist/build-stats.json && webpack-bundle-analyzer dist/build-stats.json",
"build:dev": "yarn run clean && yarn run validate-queries && webpack --no-progress --env.mode development",
"build:prod": "yarn run clean && webpack --no-progress --env.mode production",
"buildpack": "buildpack",
"clean": "rimraf dist",
"download-schema": "graphql get-schema --project venia --insecure",
"lint": "eslint --ignore-path .gitignore 'src/**/{*.js,package.json}'",
"prettier": "prettier --loglevel warn --ignore-path .gitignore 'src/**/*.@(css|graphql|js)' '*.js'",
"prettier:check": "yarn run -s prettier -- --check",
"prettier:fix": "yarn run -s prettier -- --write",
"start": "node server.js",
"start:debug": "node --inspect-brk ./node_modules/.bin/webpack-dev-server --progress --color --env.mode development",
"storybook": "echo 'Venia component stories have moved to @magento/venia-ui. Trying to run in sibling directory...' && (cd ../venia-ui && yarn run storybook:build)",
"storybook:build": "yarn run storybook",
"test": "yarn run -s prettier:check && yarn run -s lint && jest",
"validate-queries": "yarn run download-schema && graphql validate-magento-pwa-queries --project venia",
"watch": "webpack-dev-server --progress --color --env.mode development"
},
"repository": "github:magento/pwa-studio",
"author": "Magento Commerce",
"license": "(OSL-3.0 OR AFL-3.0)",
"bugs": {
"url": "https://github.com/magento/pwa-studio/issues"
},
"homepage": "https://github.com/magento/pwa-studio/tree/master/packages/venia-concept#readme",
"devDependencies": {
"@adobe/apollo-link-mutation-queue": "~1.0.0",
"@babel/core": "~7.3.4",
"@babel/plugin-proposal-class-properties": "~7.3.4",
"@babel/plugin-proposal-object-rest-spread": "~7.3.4",
"@babel/plugin-syntax-dynamic-import": "~7.2.0",
"@babel/plugin-syntax-jsx": "~7.2.0",
"@babel/plugin-transform-react-jsx": "~7.3.0",
"@babel/plugin-transform-runtime": "~7.4.4",
"@babel/preset-env": "~7.3.4",
"@babel/runtime": "~7.4.2",
"@magento/babel-preset-peregrine": "~1.0.1",
"@magento/eslint-config": "~1.5.0",
"@magento/pagebuilder": "~1.0.1",
"@magento/peregrine": "~6.0.0",
"@magento/pwa-buildpack": "~5.1.1",
"@magento/upward-js": "~4.0.1",
"@magento/venia-ui": "~3.0.0",
"@storybook/react": "~5.2.6",
"apollo-cache-inmemory": "~1.6.3",
"apollo-cache-persist": "~0.1.1",
"apollo-client": "2.6.4",
"apollo-link-context": "~1.0.17",
"apollo-link-http": "~1.5.11",
"apollo-link-retry": "~2.2.15",
"babel-core": "~7.0.0-bridge.0",
"babel-eslint": "~10.0.1",
"babel-jest": "~24.1.0",
"babel-loader": "~8.0.5",
"babel-plugin-dynamic-import-node": "~2.2.0",
"babel-plugin-graphql-tag": "~2.0.0",
"babel-plugin-module-resolver": "~3.2.0",
"braintree-web-drop-in": "~1.16.0",
"css-loader": "~2.1.1",
"dotenv": "~6.2.0",
"enzyme": "~3.9.0",
"enzyme-adapter-react-16": "~1.9.1",
"eslint": "~5.14.1",
"eslint-plugin-babel": "~5.3.0",
"eslint-plugin-graphql": "~3.0.3",
"eslint-plugin-jsx-a11y": "~6.2.1",
"eslint-plugin-node": "~8.0.1",
"eslint-plugin-package-json": "~0.1.3",
"eslint-plugin-react": "~7.12.4",
"eslint-plugin-react-hooks": "~2.0.1",
"express": "~4.16.4",
"file-loader": "~4.0.0",
"graphql": "14.3.1",
"graphql-cli": "~3.0.11",
"graphql-cli-validate-magento-pwa-queries": "~1.3.0",
"graphql-tag": "~2.10.1",
"html-webpack-plugin": "~3.2.0",
"informed": "~2.11.17",
"jarallax": "~1.11.1",
"load-google-maps-api": "~2.0.1",
"lodash.escape": "~4.0.1",
"lodash.over": "~4.7.0",
"memoize-one": "~5.0.0",
"memory-fs": "~0.4.1",
"prettier": "~1.16.4",
"prop-types": "~15.7.2",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-hot-loader": "~4.12.17",
"react-redux": "~7.1.1",
"react-router-dom": "~5.1.0",
"react-slick": "~0.25.2",
"react-tabs": "~3.0.0",
"react-test-renderer": "~16.9.0",
"redux": "~4.0.1",
"redux-actions": "~2.6.4",
"redux-thunk": "~2.3.0",
"rimraf": "~2.6.3",
"style-loader": "~0.23.1",
"terser-webpack-plugin": "~1.2.3",
"uuid": "~3.3.2",
"webpack": "~4.38.0",
"webpack-bundle-analyzer": "~3.3.2",
"webpack-cli": "~3.2.3",
"webpack-dev-server": "~3.2.1",
"workbox-webpack-plugin": "5.1.3"
},
"optionalDependencies": {
"iltorb": "~2.0.0",
"node-zopfli-es": "~1.0.3",
"sharp": "~0.23.3"
},
"engines": {
"node": "10.x",
"yarn": ">=1.12.0"
},
"module": "src/index.js",
"es2015": "src/index.js",
"esnext": "src/index.js"
}