Sage 10 and RFS (Responsive Font Sizes)

sage
1

Hello!
Im pretty new to Sage 10 development and setup, and im having trouble getting (RFS) dependency to work.
My installation is brand new so this is the first thing im trying to add.

I did

yarn add rfs

And then went to one of my styles files to import it like this:

resources>styles>common>test.scss

@import ‘rfs’;

.body {
color: lightsalmon;
@include font-size(4rem);
}

But I get the following error


$ bud dev

╭ sage [fedbeb0debf3dc50]                                                                                                        ./public
│
│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ Error: Failed to find 'rfs'
│ │   in [
│ │     resources/styles/common
│ │   ]
│ │     at node_modules/postcss-import/lib/resolve-id.js:35:13
│ │     at async Promise.all (index 0)
│ │     at async LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:289:11)
│ │     at async Object.loader (node_modules/postcss-loader/dist/index.js:84:14)
│
╰ 1 error

Im assuming Im wrong on the path or how to tell PostCss that I just added RFS but I cannot find anything on how to solve this.

any help is appreciated

2

Hi.

What have you tried? Any errors?

Have you tried consulting ChatGPT? It can be pretty useful in situations like this.

3

Hello! Thanks for the fast response,
I just added a bit more information about my issue that i think it could be helpful.

And yes I Tried Bard and Cody IA VS Extencion
here is what cody told me…

To import and use the rfs dependency in your CSS for a WordPress project, you can do:

Install rfs with yarn like before:
yarn add rfs



Import rfs in your SCSS/SASS file:
@import 'rfs';



Use the rfs mixins in your CSS:
.title {
  @include rfs(32px); 
}

p {
  @include rfs(18px);
}



Compile your SCSS/SASS into CSS as part of your build process:
sass src/styles.scss dist/styles.css



Include the compiled CSS in your WordPress theme.
So the key steps are:

Install rfs with yarn
Import rfs into your SCSS/SASS
Use the rfs mixins
Compile SCSS/SASS to CSS
Include compiled CSS in theme
This will allow you to leverage rfs to automatically calculate responsive font sizes in your WordPress theme's CSS.
4

Have you already installed sass in the project? If not, I would start by reviewing the documentation below and giving that a try.

If you already have, you might need to change the import to something like @import '~rfs/scss'; or @import 'rfs/scss';