• Stars
    star
    118
  • Rank 299,923 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Webpack Loader for the Sass version Twitter Bootstrap

Aloha from Justin Gordon and the ShakaCode Team! We need your help. Venture capital funding has slowed and, for the first time, my ShakaCode team is actively looking for our next project. If you like React on Rails, please consider contacting me if we could potentially help you in any way. I'm offering a free half hour project consultation, on anything from React on Rails to any aspect of web application development, including both consumer and enterprise products. You can read more about my background here. Whether you have a new project, or need help on an existing project, please email me directly at [email protected]. And thanks in advance for any referrals! Your support keeps this project going.

bootstrap-sass-loader

DEPRECATED

We're moving to a new project name and slightly different file format.

New Locations

The new npm libs and corresponding github repos are:

  1. bootstrap-loader
  2. sass-resources-loader

New Features

  1. Supports Bootstrap v3 and v4
  2. Easier to remove jQuery
  3. Supports CSS Modules

This new system is currently used by the live demo of reactrails.com. You can find the source code here: shakacode/react-webpack-rails-tutorial.

That being said, the current version will probably keep working, so there's no urgency to upgrade.

Upgrade Instructions

  1. Change your dependency for bootstrap as shown here. Basically, you will want to configure bootstrap-loader as an entry point. Or you might configure bootstrap-loader/extractStyles as an entry point, as shown here. Note, you no longer specify the name of your bootstrap customization file.
  2. Follow the instructions here for configuring the npm library for Bootstrap.
  3. If you're using the bootstrap jQuery plugins, configure it like this.
  4. If you have no customization file, then you're done.
  5. Otherwise, rename your customization file to .bootstraprc. See sample file .bootstraprc-3-default for how to migrate your existing bootstrap-sass-config file.

bootstrap-sass-loader (please upgrade to bootstrap-loader)

npm version

Bootstrap configuration and loading package for webpack, using the npm packages bootstrap-sass and sass-loader.

Install from bootstrap-sass-loader on npm.

If you're looking for the less version, see bootstrap-webpack. This project is based on that version for less, with some minor differences, the main one being how the configuration file specifies two sass files for customization.

In a nutshell:

  1. You've got the sass-loader to process Sass files to CSS.
  2. The npm bootstrap-sass package places the bootstrap files in /node_modules/bootstrap-sass/assets.
  3. You could simply create your own sass file to pick up bootstrap from this location, and you could require the js files here for the Bootstrap JavaScript code. See the sass-loader for instructions on configuring the directories.
  4. Or you could use this loader and load a js file that configures Bootstrap.

You can find an example of using this:

shakacode/bootstrap-sass-loader-example

Note, bootstrap-sass must be installed locally inside of ../node_modules or a parent directories node_modules directory relative to the loaded config file.

Bootstrap Version

The version of sass-bootstrap used is listed in peerDependencies, so you should be able to use whichever version you like.

Simply specify that version of bootstrap-sass in your package.json, like this:

"bootstrap-sass": "~3.3.1"

Usage

1.a Complete Bootstrap

To use the complete bootstrap package including styles and scripts with the default settings:

require("bootstrap-sass-loader");

The disadvantage to using this setup is that you can't:

  1. Customize the bootstrap variables: Bootstrap Customization
  2. You can't use the bootstrap variables for your own sass stylesheets.

1.b Customized Bootstrap

  1. Copy the file bootstrap-sass.config.js to your project. You will specify the file path in the require statement.
  2. Open that file to customize the location of a file for any Bootstrap variable overrides (preBootstrapCustomizations and bootstrapCustomizations, and your main Sass file that can depend on Bootstrap variables, plus your customizations. Any of these 3 files are optional. You may also remove any Sass or Js modules that you don't need.

Next, you should specify this as an entry point:

module.exports = {
  entry: [
    "bootstrap-sass!./path/to/bootstrap-sass.config.js"
  ]

Or a dependency within a file, like you'd specify other webpack dependencies:

require("bootstrap-sass!./path/to/bootstrap-sass.config.js");

bootstrap-sass.config.js

Here's a sample configuration file. The file included in the bootstrap-sass-loader git repo has many more options. The two customization files, bootstrapCustomizations and mainSass are optional.

module.exports = {
  bootstrapCustomizations: "./bootstrap-customizations.scss",
  mainSass: "./main.scss", // path to your main SASS file (optional)
  verbose: true, // print out your custom files used
  debug: false, // print out the full generated scss file
  styleLoader: "style-loader!css-loader!sass-loader", // see example for the ExtractTextPlugin
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
  }
};

Font Configuration

Bootstrap use some fonts. You need to configure the correct loaders in your webpack.config.js.

Take a look at example https://github.com/shakacode/react-webpack-rails-tutorial which uses custom fonts with the bootstrap-sass-loader. You'll need to create define a font-face like this:

@font-face {
  font-family: 'OpenSans-Light';
  src: url('assets/fonts/OpenSans-Light.ttf') format('truetype');
}

Example Loaders Configuration:

module.exports = {
  module: {
    loaders: [
      // **IMPORTANT** This is needed so that each bootstrap js file required by
      // bootstrap-webpack has access to the jQuery object
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },

      // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
      // loads bootstrap's css.
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=image/svg+xml" }
    ]
  }
};

extract-text-plugin Notes

  • If you don't run webpack like this, you might get a very obscure error:
PATH=$(npm bin):$PATH webpack --config webpack.rails.config.js

Alternate, you can put $(npm bin) in your path. Basically if you run type webpack and the path is your global one, then you may have issues.

  • You can configure the output file of the created CSS file by using a relative path to the output directory. For example:
  plugins: [
    new ExtractTextPlugin("../stylesheets/bootstrap-and-customizations.css")
  ]

Based on:

Known Issues

  1. Automatic Dependency loading is currently problematic. If you "touch" either of the customization files listed in your config file (bootstrapCustomizations, mainSass), then that will trigger a rebuild of the Sass files. This is a known issue with the sass-loader. I work around this issue by "touching" one of the 3 sass config files.

Testing Changes in the Bootstrap Sass Loader

  1. See this article Debugging NodeJs and Webpack Loaders
  2. Clone both this project and https://github.com/shakacode/bootstrap-sass-loader-example
  3. Use the npm link command per step #1 (see article)
  4. Be sure to run npm i bootstrap-sass in the directory where you have the bootstrap-sass-loader. This is because the location of bootstap-sass is found relative to the bootstrap-sass-loader and if you linked it and it's not not there, then you'll bet this error: "Error: Could not find path to bootstrap-sass. Check to see that it's in a parent directory of config file containing node_modules/bootstrap-sass".

Then in the bootstrap-sass-loader-example project:

  1. Make some changes in the loader, put in some print statements maybe, then run gulp webpack to invoke the loader.
  2. Then run gulp build and open the resulting file dist/index.html in the browser.
  3. Run gulp test to confirm the changes work.

Pull requests are welcome!

For more info see: http://www.railsonmaui.com and http://forum.railsonmaui.com.

Code Inspection and ESLint

  1. If using Webstorm import the inspection file in /jetbrains-inspection and inspect all files
  2. Command line: eslint .

Publishing to NPM

  1. Install the release-it npm program
  2. Merge fixes to master
  3. Run command release-it
  4. Take defaults, except for last one to publish changes (answer Y)

More Repositories

1

react_on_rails

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.
Ruby
5,085
star
2

react-webpack-rails-tutorial

Example of integration of Rails, react, redux, using the react_on_rails gem, webpack, enabling the es7 and jsx transpilers, and node integration. And React Native! Live Demo:
Ruby
1,717
star
3

bootstrap-loader

Load Bootstrap styles and scripts in your Webpack bundle
JavaScript
1,025
star
4

sass-resources-loader

SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.
JavaScript
981
star
5

cypress-on-rails

Use cypress.io or playwright.dev with your rails application. This Ruby gem lets you use your regular Rails test setup and clean-up, such as FactoryBot.
HTML
414
star
6

shakapacker

Use Webpack to manage app-like JavaScript modules in Rails
Ruby
410
star
7

fat-code-refactoring-techniques

Code samples for RailsConf 2014 on Fat Code Refactoring
JavaScript
289
star
8

re-formality

Form validation tool for reason-react
Reason
244
star
9

rescript-dnd

Drag-n-drop for @rescript/react
ReScript
115
star
10

rescript-classnames

Reimplementation of classnames in ReScript
ReScript
110
star
11

rescript-logger

Logging implementation for ReScript
ReScript
107
star
12

react_on_rails_demo_ssr_hmr

react_on_rails tutorial demonstrating SSR, HMR fast refresh, and Typescript based on the rails/webpacker webpack setup
Ruby
88
star
13

steward

Task runner and process manager for Rust
Rust
49
star
14

font-awesome-loader

Webpack Loader for Font Awesome Using Sass
JavaScript
47
star
15

webpacker_lite

Slimmed down version of Webpacker with only the asset helpers optimized for, but not requiring, React on Rails
Ruby
46
star
16

rescript-debounce

Debounce for ReScript
ReScript
43
star
17

mirror-creator

One more way to create an object with values equal to its key names
JavaScript
43
star
18

control-plane-flow

The power of Kubernetes with the ease of Heroku! Our playbook for migrating from Heroku to Control Plane, controlplane.com, and CPL CLI source
Ruby
43
star
19

reactrails-react-native-client

This repository is for a react-native client to the https://www.reactrails.com/, source at https://github.com/shakacode/react-webpack-rails-tutorial/.
JavaScript
30
star
20

redux-tree

An alternative way to compose Redux reducers
JavaScript
23
star
21

messagebus

Message bus - enables async communication between different parts of application using messages
Rust
23
star
22

rust-rescript-demo

Rust
22
star
23

ssr-rs

Server-Side Rendering for Rust web servers using Node.js
Rust
20
star
24

redux-interactions

Composing UI as a set of interactions
20
star
25

bootstrap-sass-loader-example

Example of using the bootstrap-sass-loder to load the Sass version of Twitter Bootstrap using Webpack
JavaScript
16
star
26

style-guide-javascript

ShakaCode's JavaScript Style Guide (Also see our Ruby one: https://github.com/shakacode/style-guide-ruby)
JavaScript
15
star
27

jstreamer

Ruby
12
star
28

justerror

Extension to `thiserror` that helps reduce the amount of handwriting
Rust
12
star
29

react-validation-layer

An opinionated form validation tool for React apps
JavaScript
11
star
30

rescript-react-on-rails

BuckleScript bindings to react-on-rails
ReScript
8
star
31

todos-react-native-redux

Todos app with React Native and Redux
JavaScript
7
star
32

rescript-react-on-rails-example

Example of https://rescript-lang.org/ with React on Rails
Ruby
7
star
33

conform

Macro to transform struct string fields in place
Rust
7
star
34

package_json

Ruby
6
star
35

rescript-throttle

Throttle for ReScript
ReScript
6
star
36

rescript-first-class-modules-usage

CSS
6
star
37

webpacker-examples

Ruby
5
star
38

react_on_rails-with-webpacker

Prototype of webpacker integration
Ruby
4
star
39

use-ssr-computation.macro

A babel macro for reducing initial bundle-size of Apps with React SSR. Uses conditional compilation to make computations server-side and pass the results to the client.
TypeScript
4
star
40

react_on_rails-generator-results

Results of running different react_on_rails generators. See https://github.com/shakacode/react_on_rails
4
star
41

vosk-rs

Rust
3
star
42

react-starter-kit-with-bootstrap-loader

JavaScript
3
star
43

uber_task

Ruby
3
star
44

react_on_rails-generator-results-pre-0

Ruby
2
star
45

js-promises-testing

JavaScript
2
star
46

react-on-rails-demo

Example of using the generator for React on Rails
Ruby
2
star
47

node-webpack-async-example

Simple example of setting up node with webpack
JavaScript
2
star
48

egghead-add-redux-component-to-react-on-rails

Source for Egghead lesson: Add Redux State Management to a React on Rails Project
Ruby
1
star
49

reactrails-in-reagent

Test of converting reactrails example to reagent
1
star
50

.github

1
star
51

rails-tutorial-with-react-on-rails

Adding React on Rails to the Rails Tutorial
Ruby
1
star
52

react_on_rails-test-new-redux-generation

Testing out a different redux generation. See https://github.com/shakacode/react_on_rails/pull/584
Ruby
1
star
53

yardi

Yet Another Rust Dependency Injector
Rust
1
star
54

old-react-on-rails-examples

Various example apps for React on Rails, outdated
JavaScript
1
star
55

v8-demo

React on Rails v8 Usage of the basic generator and a "generator function example"
Ruby
1
star
56

docker-ci

docker container that runs all test and linting against app
Ruby
1
star
57

react-rails-webpacker-resources

1
star
58

sass-rel-paths-issue

JavaScript
1
star
59

reactrails-in-om-next-example

Test of converting reactrails example to om-next
1
star
60

homebrew-brew

Ruby
1
star
61

zone-helper

Swift
1
star
62

react_on_rails-update-webpack-v2

Updating the default React on Rails 6.6.0 redux installation to use Webpack v2 plus adding eslint.
Ruby
1
star
63

shakacode-website

Public website and blog
HTML
1
star
64

react-native-image-zoom-slider

JavaScript
1
star
65

derive-from-one

Automatically generates `From` impls so you don't have to
Rust
1
star
66

rescript-on-rails-example

A sample application using Rescript and React on Rails.
Ruby
1
star