Local package scss variables and importing

help
1

I am currently trying to figure out how to maintain bootstrap 4 with scss in a project and utilize the variables and mixins within my custom scss. I’m really struggling to understand the best approach to doing this as a separate local package.

The goal is to simply have bootstrap loaded in a local package and have my client scss files be able to process the imported variables and mixins. There currently is no bootstrap 4 package out there, and the complexity of doing this on my own seems kind of absurd for such a basic, simple front-end task. I’ve been trying to figure this out for days now.

Does anybody have a link to a best practice of doing this? i’ve already looked at all the existing bootstrap 3 methods and packages (all of which are very different in their approach). Is there any chance that meteor is going to work on improving this aspect of the developer experience?

Meteor gets so many things right, so my mind has been blown at how difficult it is to do something as basic as import bootstrap variables into your css. any help would be really appreciated.

2

Place your scss files in local bootstrap package and then in your main scss file in the app import it by: @import "{your:packagename}/scss/path/to/files"; you also need to add your newly created package by meteor add your:packagename and of course prepare package.js file with all scss files added. As an example you can see how Foundation 5 package is organized: https://github.com/juliancwirko/meteor-zf5

…also remember that you need fourseven:scss package if you want to use scss in Meteor.

3

Ah! somehow the way you phrased that clicked with me. thank you. i managed to get it working. thank you.

I used an automated way of loading all the bootstrap files. here’s what i did:

package.js:

  //path to bootstrap
  var bootstrapPath = path.join(path.resolve("."), "packages", "bootstrap4scss", "bootstrap");

  //files in the mixin directory
  var mixinSrc = path.join(bootstrapPath, "scss/mixins")
  var mixinSrcFiles = fs.readdirSync(mixinSrc);

  mixinSrcFiles.forEach(function(file){
    if(file.slice(-4) !== 'scss') {return;}
    addPath = path.join('bootstrap/scss/mixins', file);
    api.add_files(addPath, "client", {isImport:true});
  });

  var scssSrc = path.join(bootstrapPath, "scss")
  var scssSrcFiles = fs.readdirSync(scssSrc);

  scssSrcFiles.forEach(function(file){
    if(file.slice(-4) !== 'scss') {return;}
    if(file=='bootstrap-flex.scss' || file=='bootstrap.scss'){return;}
    addPath = path.join('bootstrap/scss/', file);
    api.add_files(addPath, "client", {isImport:true});
  });

  api.add_files('bootstrap.scss', "client", {isImport:true});

This forces everything to be an import.

I then copied the actual bootstrap.scss file into the root of my package and changed all the imports to look like this:

@import "{myusername:bootstrap4scss}/bootstrap/scss/variables";

one note here is that there was an issue with the _mixins import. i had to actually copy all of the @imports from that file into the root bootstrap file.

now in my client styles.scss i have:

@import "{myusername:bootstrap4scss}/bootstrap";

and it successfully imports everything properly.

when i want to extend mixins from another scss file in my client folder, i just need to add:

@import '{}/client/styles.scss';
4

I posted a repo of this package. It seems to work fairly well. although I’m having some problems publishing it to atmosphere. i get errors about “fs.js:666:18: ENOENT, no such file or directory”

5

I’ve had this EXACT same problem.

I prototyped out a front end this weekend at a hackathon using Jekyll and Bootstrap 4 (making an ignored, git submodule of the Bootstrap v4-dev branch), and thought it would be a cinch to move it over to Meteor and start connecting a back end.

How wrong I was. I couldn’t get Sass to recognize any of the partials at all. (Yes I am using fourseven:scss)

How do you install this? Clone it into your ‘packages’ directory and then use meteor add?

I’d like to help expand on this work with you, ehm. It looks like you just copied the state of the current branch into your repositiory? How are you pulling in the v4 updates as they come in?