Issues with Ruby on Rails and Foundation Sites 6

Which way? I already tried (hours & hours) all recommendations I found, without success. Is it so problem to publish one comprehensive guide for not-so-skilled guys like me to do it properly? I use foundation over the years with absolut satisfaction… Till now…

This solution partly works. But I found out no way how to implement old good _settings.scss file for customizing look… When I tried to uncomment @import ‘settings’, it crashed immediately… I also have no idea where to put and how to apply this file…

This loads the file _settings.scss from the same directory.
Please also check the ZURB template and how it is done there: https://github.com/foundation/foundation-zurb-template/blob/8336d31c7ead46baa7574ebcca5f9c449da2cbcf/src/assets/scss/app.scss

This template is a good starting point with a preconfigured webpack configuration at https://github.com/foundation/foundation-zurb-template/blob/8336d31c7ead46baa7574ebcca5f9c449da2cbcf/gulpfile.babel.js#L106.

I know about the function of that file in the system perfectly. As I already wrote, I’m using F in my web (RoR) projects over the years. In classic sprocket environment I was able to properly install F by foundation-rails gem which includes also instalation of the _settings.scss file in assets dirs. Without necessity of study anything I really don’t need. Now I’m out… And my question is not IF, or WHAT but WHICH WAY? As I said, I’m not so skilled coder outside of RoR. That last link is for me really like BABEL or spanish village. I absolutely don’t understand what I have to do to apply that template file into system. Simple step by step guide would be appreciate…

We have no official guides for RoR projects. The template and other projects are working out of the box. We provide only the steps the import / require the needed files as this depends highly on the project structuren frameworks and libraries - like in your case.

Babel is a library to parse and transform / compile to / from different JavaScript dialects (ES6 to 5 and so on).

The word BABEL in my comment was only word game. Unfortunately, it does not work out of the box. Our discussion (and also many similar unresolved discussions out there - e. g. StackOverflow etc.) are evidence of it. IMHO, instead of similar barren discussions, it would be really wiser to publish one simple guide on how to incorporate it (really out of the box) into the RoR 6 project without terrible endless fiddling.

https://www.reddit.com/r/rails/comments/bhk72q/how_to_require_foundationsites_after_yarn_add/ and https://gorails.com/forum/how-do-i-add-zurb-foundation-sites-using-webpacker might be useful.

You probalbly don’t understand me… All of the resources you recommend me I already read. Many more than this two. The first one does not make F working, unfortunately. The second one links to ZF installation guide which is for everything except RoR… I did it working by the recommendation I published in my previous commnet. But… none of them solves my problem - how and where I have to put that template (_settings.scss file or similar) and make it visible and applicable (importable… or whatever else, to hell) to my project… THIS is my problem! Can you help me with this particular thing?

Sass loads files from the path that you specify. By default if you have a application.scss file and a _settings.scss file in the same folder the _settings.scss file will be loaded if you do @import 'settings'

Sorry but covering the basics of Sass would be too much for this thread here.
Please check https://sass-lang.com/documentation/at-rules/import

I already did it with error message result…
Here are my folders. _settings.scss file is exactly in the same folder as the file foundations.scss from which it is called…

You commented the settings file and foundation. And the underscore is required here because this tells the Sass compiler to include the file but not generate a separate settings.css file for it.

The settings file has to be loaded before foundation to define the variables before the framework is loaded.

And what exact error message do you get? I think this should be a separate topic / thread as we hijacked the original topic now.

PS: a small repo as reproducible testcase would be very helpful. Otherwise I would have to debug your setup through discussions here.

This is status when it works (without settings…). I already tried all possible ways to load (import) that file. With underscore… without uderscore… etc. etc… Always with the same result… error message…

You did not provide any details about the exact and full error message.

Please create a small repository oin GitHub with an example setup so I can test there and provide the full error message that you get. Thanks.

Please let’s continue here and not in the other thread / topic. Also I do not have Bitbucket and use only GitLab and GitHub.

Ok… Are you signed up in bitbucket.org?

No. As I already wrote, only on github.com and gitlab.com.

I’m trying to load it to github…

You have the pending invitation :wink:

rails webpacker:compile yields the following:

rails webpacker:compile
/Users/danielruf/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/actionpack-6.0.2.2/lib/action_dispatch/middleware/stack.rb:37: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
/Users/danielruf/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/actionpack-6.0.2.2/lib/action_dispatch/middleware/static.rb:110: warning: The called method `initialize' is defined here
/Users/danielruf/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/activerecord-6.0.2.2/lib/active_record/type.rb:27: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
/Users/danielruf/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/activerecord-6.0.2.2/lib/active_record/type/adapter_specific_registry.rb:9: warning: The called method `add_modifier' is defined here
Compiling...
Compiled all packs in /Users/danielruf/projects/project/public/packs
Hash: 718a69ab1281d059ec6d
Version: webpack 4.42.1
Time: 16440ms
Built at: 2020-04-27 12:04:11 AM
                                                             Asset        Size  Chunks                                Chunk Names
                                      css/stylesheets-54605708.css     117 KiB       1  [emitted] [immutable]         stylesheets
                                   css/stylesheets-54605708.css.br    14.3 KiB          [emitted]                     
                                   css/stylesheets-54605708.css.gz    17.3 KiB          [emitted]                     
                            js/application-9695607b2e4dc4c12ef7.js     296 KiB       0  [emitted] [immutable]  [big]  application
                js/application-9695607b2e4dc4c12ef7.js.LICENSE.txt   489 bytes          [emitted]                     
                         js/application-9695607b2e4dc4c12ef7.js.br      70 KiB          [emitted]                     
                         js/application-9695607b2e4dc4c12ef7.js.gz    80.3 KiB          [emitted]                     
                        js/application-9695607b2e4dc4c12ef7.js.map    1.17 MiB       0  [emitted] [dev]               application
                     js/application-9695607b2e4dc4c12ef7.js.map.br     268 KiB          [emitted]              [big]  
                     js/application-9695607b2e4dc4c12ef7.js.map.gz     319 KiB          [emitted]              [big]  
                            js/stylesheets-44dd0848eff83e4577a8.js  1010 bytes       1  [emitted] [immutable]         stylesheets
                         js/stylesheets-44dd0848eff83e4577a8.js.br   462 bytes          [emitted]                     
                         js/stylesheets-44dd0848eff83e4577a8.js.gz   517 bytes          [emitted]                     
                        js/stylesheets-44dd0848eff83e4577a8.js.map    4.55 KiB       1  [emitted] [dev]               stylesheets
                     js/stylesheets-44dd0848eff83e4577a8.js.map.br    1.54 KiB          [emitted]                     
                     js/stylesheets-44dd0848eff83e4577a8.js.map.gz    1.72 KiB          [emitted]                     
                                                     manifest.json    1.13 KiB          [emitted]                     
                                                  manifest.json.br   314 bytes          [emitted]                     
                                                  manifest.json.gz   353 bytes          [emitted]                     
   media/images/logo_mono_new-a24f657935e8e985d2621690bea8c302.svg    59.4 KiB          [emitted]                     
media/images/logo_mono_new-a24f657935e8e985d2621690bea8c302.svg.br    20.7 KiB          [emitted]                     
media/images/logo_mono_new-a24f657935e8e985d2621690bea8c302.svg.gz    23.8 KiB          [emitted]                     
   media/images/logo_mono_new-cbbc5eba154da20a0407e720c4325a80.png      79 KiB          [emitted]                     
     media/images/pngwing_44a-601aa39d344a4e9c5ec4f67d0b793735.png     687 KiB          [emitted]              [big]  
Entrypoint application [big] = js/application-9695607b2e4dc4c12ef7.js js/application-9695607b2e4dc4c12ef7.js.map
Entrypoint stylesheets = css/stylesheets-54605708.css js/stylesheets-44dd0848eff83e4577a8.js js/stylesheets-44dd0848eff83e4577a8.js.map
 [1] (webpack)/buildin/module.js 552 bytes {0} [built]
 [2] ./app/webpack/images/logo_mono_new.png 109 bytes {0} [optional] [built]
 [3] ./app/webpack/images/pngwing_44a.png 107 bytes {0} [optional] [built]
 [4] ./app/webpack/packs/application.js 974 bytes {0} [built]
 [8] ./app/webpack/channels/index.js 205 bytes {0} [built]
 [9] ./app/webpack/channels sync _channel\.js$ 160 bytes {0} [built]
[10] ./app/webpack/images sync ^\.\/.*$ 288 bytes {0} [built]
[11] ./app/webpack/images/logo_mono_new.svg 109 bytes {0} [optional] [built]
[13] ./app/webpack/packs/stylesheets.scss 39 bytes {1} [built]
    + 6 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  media/images/pngwing_44a-601aa39d344a4e9c5ec4f67d0b793735.png (687 KiB)
  js/application-9695607b2e4dc4c12ef7.js (296 KiB)
  js/application-9695607b2e4dc4c12ef7.js.map.gz (319 KiB)
  js/application-9695607b2e4dc4c12ef7.js.map.br (268 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (296 KiB)
      js/application-9695607b2e4dc4c12ef7.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/webpack/packs/stylesheets.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/webpack/packs/stylesheets.scss 474 KiB {0} [built]
    [3] ./app/webpack/images/pngwing_44a.png 107 bytes {0} [built]
    [4] ./app/webpack/images/logo_mono_new.svg 109 bytes {0} [built]
        + 2 hidden modules

So far I see no errors.

And there are also the files: