Ad

Sass Doesn't Replace Variables With Values When Run Through Webpack

- 1 answer

Fontawesome wasn't working as expected which led me to checking the app.css produced by laravel-mix build and I see this in 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");
}

while in the app.scss file I have

// Bootstrap
@import 'bootstrap/scss/bootstrap';
// FontAwesome
$fa-font-path:'[email protected]/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';

So it appears that in between sass-loader, sass and webpack the compilation misses variable substitution?

here's the 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": {}
}
Ad

Answer

updated all webpack dependencies html-loader/css-loader/url-loader/file-loader fixed it. Not sure which one was the offending dep

Ad
source: stackoverflow.com
Ad