{"id":13494795,"url":"https://github.com/shakacode/bootstrap-loader","last_synced_at":"2025-05-14T13:05:44.961Z","repository":{"id":44895728,"uuid":"45959309","full_name":"shakacode/bootstrap-loader","owner":"shakacode","description":"Load Bootstrap styles and scripts in your Webpack bundle","archived":false,"fork":false,"pushed_at":"2025-03-03T11:54:56.000Z","size":1385,"stargazers_count":1021,"open_issues_count":6,"forks_count":485,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-04-28T10:58:19.069Z","etag":null,"topics":["bootstrap-loader","bootstrap-mixins","bootstrap-styles","bootstrap-variables","sass-loader","shakacode","twitter-bootstrap","webpack","webpack-loader","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakacode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["shakacode"]}},"created_at":"2015-11-11T04:16:06.000Z","updated_at":"2025-02-22T08:24:37.000Z","dependencies_parsed_at":"2024-01-16T09:52:35.997Z","dependency_job_id":"1253fa0c-90c0-4f65-8a9e-ef58f23074df","html_url":"https://github.com/shakacode/bootstrap-loader","commit_stats":{"total_commits":274,"total_committers":50,"mean_commits":5.48,"dds":0.6167883211678833,"last_synced_commit":"549ed47b7676c8fc9696f1a4b19ee627d791ce83"},"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakacode%2Fbootstrap-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakacode%2Fbootstrap-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakacode%2Fbootstrap-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakacode%2Fbootstrap-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakacode","download_url":"https://codeload.github.com/shakacode/bootstrap-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149913,"owners_count":22022851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-loader","bootstrap-mixins","bootstrap-styles","bootstrap-variables","sass-loader","shakacode","twitter-bootstrap","webpack","webpack-loader","webpack2"],"created_at":"2024-07-31T19:01:28.342Z","updated_at":"2025-05-14T13:05:44.908Z","avatar_url":"https://github.com/shakacode.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails)\n[![npm version](https://badge.fury.io/js/bootstrap-loader.svg)](https://badge.fury.io/js/bootstrap-loader)\n\n**Webpack v4 and Bootstrap v4 supported!**\n\nIf you're using this project and you like it, please give us a star! Thanks!\n\nIf you're building an e-commerce site, like [printivity.com](https://www.printivity.com/) or a marketplace site like [datacenters.com](https://www.datacenters.com) and [Hawaii Chee](https://www.hawaiichee.com), and you want to use Rails and React, please [get in touch](mailto:justin@shakacode.com), as that is ShakaCode's speciality. We built those sites!\n\nIntersted in optimizing your webpack setup for [React on Rails](https://github.com/shakacode/react_on_rails) including code splitting with react-router v4, webpack v4, and react-loadable? [Contact me](mailto:justin@shakacode.com).\n\nShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com). We're getting into [Reason](https://reasonml.github.io/)!\n\nWe at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:\n\n* Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-pro-support.pdf).\n* Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.\n* Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).\n* **[React on Rails](https://github.com/shakacode/react_on_rails)** is ShakaCode's flagship product. We want to make sure you're aware of it!\n\nAloha and best wishes from the ShakaCode team!\n\n# ShakaCode Community\n[![2017-01-31_14-16-56](https://cloud.githubusercontent.com/assets/1118459/22490211/f7a70418-e7bf-11e6-9bef-b3ccd715dbf8.png)](https://app.mailerlite.com/webforms/landing/l1d9x5)\n\n* **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room!\n* **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions\n* **[@ShakaCode on Twitter](https://twitter.com/shakacode)**\n\n### Testimonials\nFrom Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:\n![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)\n\n# bootstrap-loader v3 Docs!\nIf you want the v1 docs which are compatible with Webpack v1, please see the [v1 branch](https://github.com/shakacode/bootstrap-loader/tree/v1). If you're using v2, be sure to check the peer dependencies of `webpack` and the `extract-text-webpack-plugin`. See the [v2 docs](https://github.com/shakacode/bootstrap-loader/tree/2.2.0).\n\n# bootstrap-loader\n\nSuccessor to [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader). Load Bootstrap styles and scripts in your Webpack bundle. This loader uses SASS to process CSS styles. Bootstrap 3 \u0026 4 are supported.\n\n## Table of Contents\n\n+ [Installation](#installation)\n+ [Usage](#usage)\n  - [Bootstrap 4 internal dependency solution](#bootstrap-4-internal-dependency-solution)\n+ [Examples](#examples)\n+ [Common configuration options](#common-configuration-options)\n  - [Bootstrap 3 \u0026 4](#bootstrap-3--4)\n  - [Bootstrap 4 only](#bootstrap-4-only)\n    * [Tether](#tether)\n    * [PostCSS](#postcss)\n    * [Glyphicon alternatives](#glyphicon-alternatives)\n+ [Additional configurations](#additional-configurations)\n  - [Paths to custom assets](#paths-to-custom-assets)\n  - [Incorporating Bootswatch themes](#incorporating-bootswatch-themes)\n  - [Multiple CSS themes](#multiple-css-themes)\n  - [jQuery](#jquery)\n  - [Icon fonts](#icon-fonts)\n+ [FAQ](#faq)\n  - [Using Bootstrap mixins and variables](#using-bootstrap-mixins-and-variables)\n+ [Contributing](#contributing)\n+ [License](#license)\n+ [Examples and related libraries](#examples-and-related-libraries)\n+ [Useful Q\u0026A](#useful-qa)\n\n## Installation\nGet it via npm:\n\n```bash\nnpm install bootstrap-loader\n```\n\nDon't forget to install these dependencies (use `--save or --save-dev` option per your needs to update your `package.json`):\n\n```bash\n# Bootstrap 3\nnpm install --save-dev bootstrap-sass\n\n# or Bootstrap 4\nnpm install --save-dev bootstrap\n\n# Node SASS \u0026 other loaders needed to handle styles\nnpm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader\n\n# Additional loaders required for Bootstrap 3 \u0026 4\nnpm install --save-dev imports-loader exports-loader\n```\n\nIf you're using Bootstrap 4, you probably need:\n\n```bash\nnpm install --save-dev postcss-loader\n```\n\n\n## Usage\nSimply require it:\n\n```js\nrequire('bootstrap-loader');\n```\n\nOr add `bootstrap-loader` as [a module in an entry point](https://webpack.github.io/docs/configuration.html#entry) in your webpack config (you'll need Webpack 2.1 beta and higher):\n\n```js\nentry: [ 'bootstrap-loader', './app' ]\n```\n\nConfig is optional. If used, by default it should be placed in your project's root dir with name `.bootstraprc`. You can write it in `YAML` or `JSON` formats. Take a look at the default config files for [Bootstrap 3](.bootstraprc-3-default) and [Bootstrap 4](.bootstraprc-4-default). Note, we recommend using a configuration or else you might pick up unwanted upgrades, such as when we make Bootstrap 4 the default. Config options don't fall back on the defaults once a config file is present. Be sure not to delete config options. To start with a custom config, copy over a default config file as a starting point.\n\nIf the default location doesn't work for you (e.g. you want to [create multiple bootstrap configs](#multiple-css-themes) for branding variations or you symlink your npm_modules directory), you may pass the **absolute path** of the `.bootstraprc` file to the loader in your webpack config, e.g. `bootstrap-loader/lib/bootstrap.loader?extractStyles\u0026configFilePath=${__dirname}/.bootstraprc!bootstrap-loader/no-op.js`.\n\nNote that :`__dirname` is a [global variable](https://nodejs.org/docs/latest/api/globals.html#globals_dirname) that Node sets for us. It is \"the name of the directory that the currently executing script resides in.\"\n\n### YAML Format\n```yaml\n---\n# You can use comments here\nstyleLoaders:\n  - style-loader\n  - css-loader\n  - sass-loader\n\nstyles:\n  normalize: true\n  print: true\n\nscripts:\n  alert: true\n  button: true\n```\n\n### JSON Format\n```json\n{\n  // And JSON comments also!\n  \"styleLoaders\": [\"style-loader\", \"css-loader\", \"sass-loader\"],\n\n  \"styles\": {\n    \"normalize\": true,\n    \"print\": true\n  },\n\n  \"scripts\": {\n    \"alert\": true,\n    \"button\": true\n  }\n}\n```\n\nIf no config provided, default one for Bootstrap 3 will be used.\n\n### ENV Specific Values\nThe following settings can be set differently \n\nDifferent settings for different environments can be used.\n\nExample of setting production to extract styles and other envs don't and use the style-loader:\n \n```yaml\n# It depends on value of NODE_ENV environment variable\nenv:\n  production:\n    extractStyles: true\n    styleLoaders:\n      - css-loader\n      - postcss-loader\n      - sass-loader\n\n# If NODE_ENV specific value not found\nextractStyles: false\nstyleLoaders:\n  - style-loader\n  - css-loader\n  - postcss-loader\n  - sass-loader\n```\n\n### Bootstrap 4 internal dependency solution\n\nBecause of Bootstrap 4's removal of UMD, internal dependencies, such as Popover's dependencies on Tooltip and Dropdown's dependency on Utils, are no longer naively resolved by Webpack (See Issue [#172](https://github.com/shakacode/bootstrap-loader/issues/172). In order to solve this issue, add the following code to your webpack configuration:\n```\nplugins: [\n  new webpack.ProvidePlugin({\n    $: \"jquery\",\n    jQuery: \"jquery\",\n    \"window.jQuery\": \"jquery\",\n    Tether: \"tether\",\n    \"window.Tether\": \"tether\",\n    Popper: ['popper.js', 'default'],\n    Alert: \"exports-loader?Alert!bootstrap/js/dist/alert\",\n    Button: \"exports-loader?Button!bootstrap/js/dist/button\",\n    Carousel: \"exports-loader?Carousel!bootstrap/js/dist/carousel\",\n    Collapse: \"exports-loader?Collapse!bootstrap/js/dist/collapse\",\n    Dropdown: \"exports-loader?Dropdown!bootstrap/js/dist/dropdown\",\n    Modal: \"exports-loader?Modal!bootstrap/js/dist/modal\",\n    Popover: \"exports-loader?Popover!bootstrap/js/dist/popover\",\n    Scrollspy: \"exports-loader?Scrollspy!bootstrap/js/dist/scrollspy\",\n    Tab: \"exports-loader?Tab!bootstrap/js/dist/tab\",\n    Tooltip: \"exports-loader?Tooltip!bootstrap/js/dist/tooltip\",\n    Util: \"exports-loader?Util!bootstrap/js/dist/util\",\n  })\n]\n```\n\n## Examples\nCheck out example apps in [`examples/`](examples) folder:\n\n* Basic usage: [examples/basic](examples/basic)\n* With CSS Modules: [examples/css-modules](examples/css-modules) (This example shows off hot reloading with Babel 6 as well!)\n* With multiple entries [examples/multiple-entries](examples/multiple-entries) with their own config _[currently out of date]_.\n\n## Common configuration options\nHere are common options for Bootstrap 3 \u0026 4.\n\n### Bootstrap 3 \u0026 4\n\n#### `loglevel`\n\nDefault: `disabled`\n\nOutputs debugging info. Set this option to `debug` to output debugging information. This is critical for debugging issues. The output will go to your webpack console.\n\n```yaml\nloglevel: debug\n```\n\n#### `bootstrapVersion`\n\nDefault: `3`\n\nMajor version of Bootstrap. Can be 3 or 4.\n\n```yaml\nbootstrapVersion: 3\n```\n\n#### `styleLoaders`\n\nDefault: `[ 'style-loader', 'css-loader', 'sass-loader' ]`\nEnv Specific: true\n\nArray of webpack loaders. `sass-loader` is required, order matters. In most cases the style loader should definitely go first and the sass loader should be last.\n\nNote: Beginning with Webpack v2.1.0-beta.26, the '-loader' suffix is required for all loaders.\nTo maintain compatibility with older versions, all accepted style loaders (style, css, postcss, sass, resolve-url) are automatically appended with '-loader'.\nIt is recommended that you explicitly state the '-loader' suffix for every webpack loader in `styleLoaders` to ensure compatibility in the long term.\n\n```yaml\nstyleLoaders:\n  - style-loader\n  - css-loader\n  - sass-loader\n\n# You can apply loader params here:\n  - sass-loader?outputStyle=expanded\n```\n\nDifferent settings for different environments can be used. See above example.\n\n#### `extractStyles`\n\nDefault: `false`\nEnv Specific: true\n\nExtract styles to stand-alone css file using `mini-css-extract-plugin` version 2.0.0-beta or higher. See [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) for more details.\n\n```yaml\nextractStyles: false\n```\n\nDifferent settings for different environments can be used. See above example.\n\nThis param can also be set to `true` in webpack config:\n\n```js\nentry: [ 'bootstrap-loader/extractStyles', './app' ]\n```\n\nSee [shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.client.rails.build.config.](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.client.rails.build.config.js) for a working example which is deployed to [www.reactrails.com](http://www.reactrails.com/).\n\n#### `preBootstrapCustomizations`\n\nDefault: `disabled`\n\nCustomize Bootstrap variables that get imported before the original Bootstrap variables. Thus, derived Bootstrap variables can depend on values from here. See the Bootstrap [`_variables.scss`](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss) file for examples of derived Bootstrap variables.\n\n```yaml\npreBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss\n```\n\n#### `bootstrapCustomizations`\n\nDefault: `disabled`\n\nThis gets loaded after bootstrap variables is loaded. Thus, you may customize Bootstrap variables based on the values established in the Bootstrap [`_variables.scss`](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss) file. Note, if `bootstrap` did not have derived values, it would not be necessary to have two config files for customizing bootstrap values.\n\nIf you want your bootstrap override value to apply to derived variable values, then place your customizations in `preBootstrapCustomizations`. If you want to be sure your changes don't affect other derived values, place the changes in bootstrapCustomizations.\n\nIf you are not sure, you can probably simply use `preBootstrapCustomizations` and, if you have issues, see [`_variables.scss`](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss) for derived values.\n\n```yaml\nbootstrapCustomizations: ./path/to/bootstrap/customizations.scss\n```\n\n#### `appStyles`\n\nDefault: `disabled`\n\nImport your custom styles here. Usually this endpoint-file contains list of `@imports` of your application styles.\n\n```yaml\nappStyles: ./path/to/your/app/styles/endpoint.scss\n```\n\n#### `styles`\n\nDefault: all\n\nBootstrap styles.\n\n```yaml\nstyles:\n  mixins: true\n  normalize: true\n  ...\n\n# or enable/disable all of them:\nstyles: true / false\n```\n\n#### `scripts`\n\nDefault: all\n\nBootstrap scripts.\n\n```yaml\nscripts:\n  transition: true\n  alert: true\n  ...\n\n# or enable/disable all of them:\nscripts: true / false\n```\n\n#### `useCustomIconFontPath`\n\nDefault: false\n\nIf you're using a custom icon font and you need to specify its path (`$icon-font-path`) in your Sass files, set this option to true.\n\n```yaml\nuseCustomIconFontPath: true / false\n```\n\n```\n$icon-font-path: ../fonts // relative to your Sass file\n$icon-font-name: 'glyphicons' // you'll typically want to change this too.\n```\n\n\n### Bootstrap 4 only\nThere is only one additional option for Bootstrap 4:\n\n#### Tether\nAdditionally, Bootstrap 4 requires Tether. You can add Tether per the examples in the `/examples` directory.\n\n1. Add tether to package.json: `npm i --save tether`\n2. Add tether as an entry point to your webpack config.\n3. Add this plugin to your webpack config:\n\n```\n  plugins: [\n    new ExtractTextPlugin('app.css', { allChunks: true }),\n    new webpack.ProvidePlugin({\n      \"window.Tether\": \"tether\"\n    }),\n  ],\n```\n\n#### PostCSS\nBootstrap 4 seems to require postcss:\n\n1. Add postcss and the the postcss-loader: `npm i --save postcss postcss-loader`\n2. Put `postcss` before `sass` in the order of loaders in your `.bootstraprc` file.\n\n#### Glyphicon alternatives\nGlyphicons have been removed from Bootstrap 4. The examples demonstrate how to use the font-awesome-loader\n\n## Additional configurations\n\n#### Paths to custom assets\nIf you use `bootstrap-loader` to load your styles (via `preBootstrapCustomizations`, `bootstrapCustomizations` \u0026 `appStyles`) and you load custom assets (fonts, images etc.), then you can use relative paths inside `url` method (relative to SASS file, from which you load asset).\n\nThis was made possible thanks to [resolve-url-loader](https://github.com/bholloway/resolve-url-loader). In common case you don't have to do anything special to apply it — we are doing it internally (just don't forget to install it). But if you want to use its custom settings, please provide it explicitly via `styleLoaders` option in `.bootstraprc`:\n\n```yaml\nstyleLoaders:\n  - style-loader\n  - css-loader?sourceMap\n  - resolve-url-loader?sourceMap\n  - sass-loader?sourceMap\n```\n\n#### Incorporating Bootswatch themes\nThe following steps are needed to successfully incorporate a theme from Bootswatch:\n\n1. Download the `.scss` files (`_variables.scss` and `_bootswatch.scss`) for the theme you have chosen.\n2. Put the files somewhere in your project structure (e.g. the `./styles` directory).\n3. Add an additional SCSS file, like bs-theme.scss, that contains the following:\n   ```\n   @import './_bootswatch.scss';\n   ```\n\n4. Add the following to your .bootstraprc file:\n  ```\n  preBootstrapCustomizations: ./styles/_variables.scss\n  appStyles: ./styles/bs-theme.scss\n  ```\nThe theme should now be applied as expected.\nNote that this section might be valid for other theme packs as well.\n\n#### Multiple CSS themes\nSee [examples/multiple-entries/webpack.prod.config.js](examples/multiple-entries/webpack.prod.config.js) for an example configuration of the following:\n1. In `entry`, set up one bundle per theme. In each bundle include `bootstrap-loader` with [`extractStyles`](https://github.com/shakacode/bootstrap-loader#extractstyles) and the respective config file.\n2. In `plugins,` set up the `extract-text-webpack-plugin` to output each CSS file as `[name].css`. This will output a CSS file named after each bundle.\n\n#### jQuery\nIf you want to use Bootstrap's JS scripts — you have to provide `jQuery` to Bootstrap JS modules using `imports-loader`. To avoid having to include `jQuery` in your project you can disable all scripts (see [scripts](#scripts)).\n\n```js\nmodule: {\n  loaders: [\n    // Use one of these to serve jQuery for Bootstrap scripts:\n\n    // Bootstrap 3\n    { test:/bootstrap-sass[\\/\\\\]assets[\\/\\\\]javascripts[\\/\\\\]/, loader: 'imports-loader?jQuery=jquery' },\n\n    // Bootstrap 4\n    { test: /bootstrap[\\/\\\\]dist[\\/\\\\]js[\\/\\\\]umd[\\/\\\\]/, loader: 'imports-loader?jQuery=jquery' },\n  ],\n},\n```\n\nNote: if you're not concerned about Windows, the lines look like this (simpler regexp pattern):\n\n```js\n// Bootstrap 3\n{ test: /bootstrap-sass\\/assets\\/javascripts\\//, loader: 'imports-loader?jQuery=jquery' },\n\n// Bootstrap 4\n{ test: /bootstrap\\/dist\\/js\\/umd\\//, loader: 'imports-loader?jQuery=jquery' },\n```\n\n\n#### Icon fonts\nBootstrap uses **icon fonts**. If you want to load them, don't forget to setup `url-loader` or `file-loader` in webpack config:\n\n```js\nmodule: {\n  loaders: [\n    { test: /\\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },\n    { test: /\\.(ttf|eot)$/, loader: 'file-loader' },\n  ],\n},\n```\n\n## FAQ\n\n### Using Bootstrap mixins and variables\n\nYou should use `sass-resources-loader` in your `webpack` config.\n\nIn your `webpack.config.js`:\n```javascript\nmodule.exports = {\n\n  // stuff removed for clarity ...\n\n  module: {\n    loaders: [\n      // stuff removed for clarity ...\n      {\n        test: /\\.scss$/,\n        loader: ExtractTextPlugin.extract(\n          'style-loader',\n          'css-loader?modules\u0026importLoaders=2\u0026localIdentName=[name]__[local]__[hash:base64:5]' +\n          '!sass-loader' +\n          '!sass-resources-loader'\n        ),\n      },\n      // stuff removed for clarity ...\n    ],\n  },\n\n  // stuff removed for clarity ...\n\n  sassResources: './config/sass-resources.scss',\n}\n```\n\nAnd in your `./config/sass-resources.scss`:\n```\n// Make variables and mixins available when using CSS modules.\n@import \"node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables\";\n@import \"node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins\";\n```\n\nYou can then use mixins and variables from Bootstrap in your own code.\n\n### Using a custom location for bootstrap module\n\nBy default, `bootstrap-loader` will try to resolve `bootstrap` from where `bootstrap-loader` has been installed. In [certain situations](https://github.com/shakacode/bootstrap-loader/issues/254) (e.g. npm linking, using a custom package installer) it may not be resolvable. In this case, you can pass in the location manually.\n\n```js\nrequire('bootstrap-loader?bootstrapPath=/path/to/bootstrap');\n\n// or\n\nentry: [ 'bootstrap-loader?bootstrapPath=/path/to/bootstrap', './app' ]\n```\n\n## Contributing\nSee [Contributing](CONTRIBUTING.md) to get started.\n\n## License\nMIT.\n\n## Examples and related libraries\n* [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/), live example at [www.reactrails.com](http://www.reactrails.com/).\n* [sass-resources-loader](https://github.com/shakacode/sass-resources-loader/)\n* [Simple integration example](./examples/basic)\n* [React + hot reloading example: bootstrap-loader-css-modules-example](./examples/css-modules)\n* [react_on_rails gem](https://github.com/shakacode/react_on_rails)\n\n## Useful Q\u0026A\n* [Using CSS modules with Bootstrap](https://github.com/shakacode/bootstrap-loader/issues/9)\n* [How would you use bootstrap styles to build css module styles](https://github.com/shakacode/bootstrap-loader/issues/12)\n\nWe'll identify issues that are [questions](https://github.com/shakacode/bootstrap-loader/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+label%3Aquestion).\n\n---\n\n## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)\n\n[The ShakaCode team has availability to help your project](http://www.shakacode.com/work). If your team might need my help, please [email me](mailto:justin@shakacode.com) for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.\n\n* **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.\n\nWe at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:\n\n* Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-coaching-plan.pdf).\n* Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.\n* Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).\n* Augmenting your team to get your product completed more efficiently and quickly.\n\nI appreciate your attention and sharing of these offerings with anybody that we can help. Your support allows me to bring you and your team [front-end happiness in the Rails world](https://www.youtube.com/watch?v=SGkTvKRPYrk).\n\nAloha and best wishes from the ShakaCode team!\n\n## Supporters\n\n\u003ca href=\"https://www.jetbrains.com\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png\" alt=\"JetBrains\" height=\"120px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://scoutapp.com\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881147-0d077438-3978-40da-ace9-4f650d2efe2e.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png\"\u003e\n    \u003cimg alt=\"ScoutAPM\" src=\"https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png\" height=\"120px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://shakacode.controlplane.com\"\u003e\n  \u003cpicture\u003e\n    \u003cimg alt=\"Control Plane\" src=\"https://github.com/shakacode/.github/assets/20628911/90babd87-62c4-4de3-baa4-3d78ef4bec25\" height=\"120px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://www.browserstack.com\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881122-407dcc29-df78-4b20-a9ad-f597b56f6cdb.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png\"\u003e\n    \u003cimg alt=\"BrowserStack\" src=\"https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png\" height=\"55px\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://railsautoscale.com\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4244251/184881144-95c2c25c-9879-4069-864d-4e67d6ed39d2.png\" alt=\"Rails Autoscale\" height=\"55px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.honeybadger.io\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4244251/184881133-79ee9c3c-8165-4852-958e-31687b9536f4.png\" alt=\"Honeybadger\" height=\"55px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://reviewable.io\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/20628911/230848305-c94510a4-82d7-468f-bf9f-eeb81d3f2ce0.png\" alt=\"Reviewable\" height=\"55px\"\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\nThe following companies support our open source projects, and ShakaCode uses their products!\n","funding_links":["https://github.com/sponsors/shakacode"],"categories":["JavaScript","Resources"],"sub_categories":["Dev Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakacode%2Fbootstrap-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakacode%2Fbootstrap-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakacode%2Fbootstrap-loader/lists"}