javascript css ruby-on-rails-6 webpacker bootstrap-themes

SassError: Parentheses aren't allowed in plain CSS

Newbie to webpacker in Rails 6 and I suck at CSS

I am trying to integrate a bootstrap 4 theme I purchased: https://live.hasthemes.com/html/4/maxcoach-preview/maxcoach/index.html

I have not modified the code in any way. If CSS doesn't allow parenthesis then... shrug

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.1.1'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.3.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

gem 'bootstrap', '~> 4.6'
...

I know the code works as it's a purchased theme. I think it has to do with my package.json and it's dependencies but I have no idea if I'm doing any of this right. Can someone point me in the right direction? Or have any idea what's going on here?

terminal output:

ERROR in ./app/javascript/stylesheets/application.scss
16:02:33 webpacker.1 | Module build failed (from 
./node_modules/@rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js):
16:02:33 webpacker.1 | ModuleBuildError: Module build failed (from ./node_modules/sass- 
loader/dist/cjs.js):
16:02:33 webpacker.1 | SassError: Parentheses aren't allowed in plain CSS.
16:02:33 webpacker.1 |      ╷
16:02:33 webpacker.1 | 5399 │   -ms-grid-columns: (1fr)[3];
16:02:33 webpacker.1 |      │                     ^
16:02:33 webpacker.1 |      ╵
16:02:33 webpacker.1 |   app/javascript/stylesheets/css/style.css 5399:21  @import
16:02:33 webpacker.1 |   app/javascript/stylesheets/application.scss 13:9  root stylesheet

app/javascript/stylesheets/css/style.css 5399:21

  .instagram-grid-wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];      <--- here!
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px; }

package.json

{
  "name": "empowered_you",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "4.6.0",
    "css-loader": "^5.0.1",
    "jquery": "^3.5.1",
    "loader-utils": "^2.0.0",
    "mini-css-extract-plugin": "^1.3.5",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "sass": "^1.32.6",
    "sass-loader": "^10.0.0",
    "style-loader": "^2.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.27.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
              sassOptions: {
                fiber: false,
              },
            },
          },
        ],
      },
    ],
  },
};

javascript/stylesheets/application.scss

@import './css/plugins/aos.min';
@import './css/plugins/animate';
@import './css/plugins/ion.rangeSlider.min';
@import './css/plugins/jquery.animatedheadline';
@import './css/plugins/justifiedGallery.min';
@import './css/plugins/magnific-popup';
@import './css/plugins/selectric';
@import './css/plugins/plugins.min';
@import './css/plugins/swiper.min';

@import './css/style';         //<---here
@import './css/style.min';
@import './css/vendor/bootstrap.min';
@import './css/vendor/vendor.min';
@import './css/vendor/font-awesome-pro.min';
@import './css/vendor/font-gilroy';
@import './css/vendor/fonts-rossela';

@import './fonts';

javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import '../stylesheets/application';

// import $ from 'jquery';
// import 'bootstrap/dist/js/bootstrap';

import '../vendor/bootstrap.bundle.min';
import '../vendor/jquery-3.4.1.min';
import '../vendor/jquery-migrate-3.1.0.min';
import '../vendor/modernizr-3.6.0.min';
import '../vendor/vendor.min';

import '../plugins/aos.min';
import '../plugins/countdown.min';
import '../plugins/gmap.min';
import '../plugins/imagesloaded.pkgd.min';
import '../plugins/ion.rangeSlider.min';
import '../plugins/isotope.pkgd.min';
import '../plugins/Jarallax.min';
import '../plugins/jquery.ajaxchimp.min';
import '../plugins/jquery.animatedheadline.min';
import '../plugins/jquery.counterup.min';
import '../plugins/jquery.justifiedGallery.min';
import '../plugins/jquery.magnific-popup.min';
import '../plugins/jquery.selectric.min';
import '../plugins/masonry.pkgd.min';
import '../plugins/parallax.min';
import '../plugins/plugins.min';
import '../plugins/rellax.min';
import '../plugins/sticky-sidebar';
import '../plugins/svg-inject.min';
import '../plugins/swiper.min';
import '../plugins/vivus.min';
import '../plugins/waypoints.min';
import './main';



$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: 'body',
  });

  $('body').popover({
    selector: '[data-toggle="popover"]',
    container: 'body',
    html: true,
    trigger: 'hover',
  });
});

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

Am I missing a dependency? Is it the order of my imports in application.scss that I should be concerned about?

Thanks

Solution

I suggest you ditch IE support and get rid of -ms-grid-columns. grid-template-columns have broad browser compatibility by now and works for Edge.

That said, it seems like the value (1fr) should be without the parens. As far as I know there isn't any grid css that uses parenthesis, even though they are absolutely allowed in plain css, for example in var() and calc().