Twitter Bootstrap Question posted in

How to reach twitter's Bootstrap installed with npm – Twitter bootstrap

I need some help with Gulp. I haven’t used Gulp very much, so please forgive me if this is a silly question.

I’m fascinated by the idea of just doing a npm install bootstrap in order to get plug-ins etc. for my projects. But I can’t seem to figure out how to I’m supposed to access them after the installation.

I want to use Twitter’s Bootstrap framework, but as I haven’t had the time to teach myself sass yet, so I just want the normal .css files in my project. When I do an npm install bootstrap it installs in ./node_modules/bootstrap. So what is the best way to import just the .css files to my src/css/ folder while keeping it up to date with npm update (if I’d ever want to update it)?

(Obviously doing <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> would be plain wrong?)

I guess I could just add it as a git submodule as an up to date version is available at GitHub – which would accomplish what I’m looking for.

I suppose I’m supposed to do an import 'bootstrap'; or require('bootstrap') but I’m at a loss, so please help me…

Tags:

2

Answers


  1. 0

    If you’re just using Gulp on its own, then your best bet would probably be to copy the file to your output directory:

    gulp.task("bootstrap", function() {
   // This copies the entire folder structure - you could just use one file if you wanted
   gulp.src("./node_modules/bootstrap/dist/**/*")
       .pipe(gulp.dest("./dist/bootstrap/"));
});

    Or concatenate it into your output files using gulp-concat:

    var concat = require("gulp-concat");

gulp.task("concat", function() {
    return gulp.src([
        "./node_modules/bootstrap/dist/css/bootstrap.css",
        "./src/my-awesome-styles.css"
    ])
    .pipe(concat("style.css"))
    .pipe(gulp.dest('./dist/'));
});

    Alternatively, if you’re using a module bundler like Webpack, you can import it through your JavaScript (assuming you have the css and style loaders installed and configured, or their equivalent in whatever tool you’re using):

    import "bootstrap/dist/css/bootstrap.css";
    Login or Signup to reply.
  2. 0

    I guess that you just need to call the relative path for the bootstrap file and this should take the latest compiled file whenever you receive update through npm update.

    I recommend you to go through this to understand about the file stucture:
    https://www.npmjs.com/package/bootstrap

    I would never recommend to use import ‘bootstrap’; command.
    And, adding require(‘bootstrap’) into the Js file which is main entry point for the JS is same as having installing packages locally.

    Note: Node packages follows Semantic Versioning guidelines hence you need not to worry. Just an idea use “npm install bootstrap –save” >> this command creates entry into package.json file as “dependencies.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search