How can I use SCSS like on normal react js web application?

[forevereffort]

I am going to use node-sass package instead of the current styling method that is supported on Frontity.

import './theme-files/assets/scss/style.scss';

like the above. is it possible?

[Pablo]

Hey @forevereffort welome to the Frontity community!

It’s not possible to use SCSS with Frontity. It’s covered here in our docs: https://docs.frontity.org/learning-frontity/styles#from-sass-to-css-in-js

You also can find more information in these other two threads:

Use CSS or SCSS instead of Emotion?

First, I absolutely understand your concern. Thanks for sharing it. Please don’t take my answer as something personal. It’s not. There are a couple of problems with SCSS: We cannot delete non-used CSS automatically. This may not seem important, but when you work with AMP the styles cannot be bigger than 50kbytes. With CSS-in-JS we can only add the styles used in your AMP page. With SCSS, we’d have to add all the styles of the whole theme to any single page. Frontity has a powerful package sys…

Just to be clear, it's not possible at all to use SCSS?

I have read a few posts on this topic but just wanted to get a definitive answer. It isn’t actually possible to use scss with Frontity? Only css-in-js?

Hope this helps.

[forevereffort]

@Pablo Thank you very much. for building theme from scratch, I need to add normalize.css. how can I do it?

I am using https://necolas.github.io/normalize.css/ for start html building

PS @Pablo can you review my another question, too? By somereason, I need to get another page acf fields. my following frontity API using is correct?

[mburridge]

Hi @forevereffort

Take a look at this repo for an example of importing a CSS file into a Frontity project: https://github.com/frontity-demos/bootstrap-theme-demo

This example uses Bootstrap, but the principle will apply to any CSS file.

In particular take a look at this file: https://github.com/frontity-demos/bootstrap-theme-demo/blob/master/packages/bootstrap-theme/src/components/Theme/index.js

Here are the docs for applying styles globally across your project:

• https://docs.frontity.org/learning-frontity/styles#less-than-global-greater-than
• https://docs.frontity.org/learning-frontity/styles#external-css-files

Hope this helps.

[forevereffort]

@mburridge Thank you very much. if possible, can you review my another question? By somereason, I need to get another page acf fields. my following frontity API using is correct?

[rodriigomedeiros]

Hello, allow me to reactivate this discussion.

I currently work with bootstrap but limiting it to only a few modules and for that, I would need to import .scss file.

Can this be done through an extra webpack setup?

[mmczaplinski]

See the answer above: How can I use SCSS like on normal react js web application?

In short: it’s not possible at the moment.