Relative asset paths issue in SCSS files - Sage 9

sage
,
1

This issue is similar to this one.

I know this issue has been brought up multiple times but I am banging my head against the wall here trying to come up with a solution. I am not much of a Webpack expert, so I imagine that’s the source of my ignorance but help would be appreciated. I have a sage install that have been working on for quite a few months with few issues and I am trying to hook up local fonts. I am having issues with the relative paths, not a build time error but the final URL outputs are incorrect.

In my _fonts.scss file:

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Raleway-Regular.ttf') format('truetype');
}

In chrome the outputed error:
Failed to decode downloaded font: https://site.test/wp-content/themes/theme/dist/styles/wp-content/themes/theme/dist/fonts/Raleway-Regular.ttf

As you can see, the URL is doubling. Here is my config.json:

"publicPath": "wp-content/themes/theme",
"devUrl": "https://site.test",
"proxyUrl": "https://localhost:3000",

And my dependencies in package.json:

"devDependencies": {
    "autoprefixer": "~8.2.0",
    "browser-sync": "~2.24.7",
    "browsersync-webpack-plugin": "^0.6.0",
    "bs-html-injector": "~3.0",
    "buble-loader": "^0.4.1",
    "cache-loader": "~1.2.5",
    "clean-webpack-plugin": "^0.1.18",
    "copy-globs-webpack-plugin": "^0.2.0",
    "css-loader": "^0.28.9",
    "cssnano": "~4.0.5",
    "eslint": "~4.19.1",
    "eslint-loader": "~1.9",
    "eslint-plugin-import": "~2.14.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "glob-all": "^3.2.1",
    "imagemin-mozjpeg": "~7.0.0",
    "imagemin-webpack-plugin": "~2.2.0",
    "import-glob": "~1.5",
    "node-sass": "~4.9.4",
    "postcss-loader": "~2.1.0",
    "postcss-safe-parser": "~3.0",
    "purgecss-webpack-plugin": "0.23.0",
    "resolve-url-loader": "~2.3.1",
    "rimraf": "~2.6",
    "sass-loader": "~6.0",
    "style-loader": "^0.22.1",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "~18.2.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "tailwindcss": "1.9.6",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "webpack": "3.12.0",
    "webpack-assets-manifest": "^1.0.0",
    "webpack-dev-middleware": "~2.0.4",
    "webpack-hot-middleware": "~2.22.3",
    "webpack-merge": "~4.1.4",
    "yargs": "~11.0.0"
  },

I have the correct versions of url-loader and resolve-url-loader that have seemed to cause issues to others in the past. Any ideas?

I am using node v10.21.0, Sage 9.0.9

2

You may find the Sage 9.1 update branch interesting as this should fix most if not all build/watch issues:

e class='quote' data-post="1" data-topic="20067">
Sage "9.1": Please test sage
Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…
3

Alright I am giving this a shot but I get the following error with yarn build when I tried to update the existing project:

ERROR in ./styles/main.scss
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../../node_modules/postcss-loader/dist/cjs.js):
ReferenceError: options is not defined

I didn’t get any build error with the test theme that I built with the composer command you provided. The only difference is my Tailwind configurations.

I also get this with another main level SCSS file that I use just for the Gutenberg editor. I am using tailwind 1.9. I tried disabling the tailwind imports and I still get the error. My webpack.config.js file is exactly the same as the PR you linked. Any insights?

4

IIRC this is caused by a change in the way PostCSS (or potentially postcss-loader) handles option arguments–the format has changed but Sage 9 is using an older format.

5

That would make sense since I am still using my old post css configuration. I’ll have to look into how that’s setup with the newer versions of webpack/postcss

6

The issue was postcss for anyone else wondering. Here’s my postcss.config.js with Tailwind:

/* eslint-disable */

module.exports = (api) => {

  const cssnanoConfig = {
    preset: ['default', { discardComments: { removeAll: true } }]
  };

  return {
    parser: api.options.ctx.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      tailwindcss: `${api.options.ctx.paths.assets}/styles/tailwind.config.js`,
      autoprefixer: true,
      cssnano: api.options.ctx.enabled.optimize ? cssnanoConfig : false,
    },
  };

};
7

So I have the solution that fixes yarn build but now it looks like I am running into a different problem with mini-css-extractor-plugin, which I have no experience with, on yarn build:production.

I now get this error:

ERROR in ./styles/main.scss
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
TypeError: node.getIterator is not a function

I am assuming this also has to do with Tailwind configuration but now all of my webpack files are identical to the test theme. The only different is the PostCSS config that has the TailwindCSS plugin configuration.

8

So the reason for all these issues is that the Sage 9 (and the update branch) uses a little CLI script during creation that asks for the framework and adds framework-specific modifications on top of the base framework files. Please check out that guide for Sage 9.1 update branch for the update instructions (project in version control, create empty project, copy over, merge using version control).