Fontawesome не работал должным образом, что привело меня к проверке app.css, созданного laravel -микс-сборкой, и я вижу это в app.css
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url([object Module]);
src: url([object Module]?#iefix) format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url([object Module]#fontawesome) format("svg");
}
в то время как в app.scss файл, который у меня есть
// Bootstrap
@import 'bootstrap/scss/bootstrap';
// FontAwesome
$fa-font-path:'~@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/brands';
//Web Frontend Styles
@import 'app/scss/clean-blog';
Таким образом, кажется, что между sass-loader, sass и webpack компиляция пропускает подстановку переменных?
вот package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "cross-env NODE_ENV=test jest",
"tdd": "npm run test -- --watch --notify"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-modules-commonjs": "7.8.3",
"@babel/preset-react": "7.8.3",
"@babel/register": "7.8.6",
"@babel/standalone": "7.8.6",
"@fortawesome/fontawesome-free": "^5.13.0",
"@testing-library/dom": "6.12.2",
"@testing-library/jest-dom": "5.1.1",
"@testing-library/react": "9.4.0",
"axios": "0.19.2",
"babel-eslint": "10.1.0",
"babel-jest": "25.1.0",
"bootstrap": "4.3.1",
"chart.js": "2.9.3",
"classnames": "2.2.6",
"clipboard": "2.0.4",
"core-js": "3.0.0",
"cross-env": "5.1",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.2",
"enzyme-to-json": "3.4.4",
"eslint": "6.8.0",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-jest": "23.7.0",
"eslint-plugin-react": "7.18.3",
"file-loader": "5.1.0",
"history": "4.10.1",
"identity-obj-proxy": "3.0.0",
"jest": "25.2.3",
"jquery": "3.4.1",
"jsdom": "16.2.1",
"laravel-mix": "5.0.4",
"lodash": "4.17.13",
"moment": "2.19.3",
"popper.js": "1.14.7",
"prettier": "1.19.1",
"primeflex": "1.0.0",
"primeicons": "2.0.0",
"primereact": "4.1.2",
"prop-types": "15.7.2",
"react": "16.12.0",
"react-app-polyfill": "1.0.6",
"react-dom": "16.12.0",
"react-images": "1.1.0",
"react-quill": "1.3.3",
"react-router-dom": "5.1.2",
"react-transition-group": "4.3.0",
"resolve-url-loader": "3.1.0",
"respond.js": "1.4.2",
"sass": "1.26.3",
"sass-loader": "7.*",
"typescript": "3.8.2",
"webpack-cli": "3.3.11"
},
"jest": {
"verbose": true,
"collectCoverage": true,
"name": "unit-tests",
"displayName": "UnitTests",
"rootDir": "./resources/js",
"testRegex": "tests/.*.test.js$",
"moduleDirectories": [
"<rootDir>/components",
"<rootDir>/containers",
"<rootDir>/views",
"node_modules"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "__mocks__/fileMock.js",
"\\.(css|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"<rootDir>/tests/setup/enzyme.js",
"<rootDir>/tests/setup/jsdom.js"
],
"transform": {
"^.+\\.js$": "babel-jest"
},
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"dependencies": {}
}