From 40788916f0eb822baa09a5d08beee7e4d9608ebb Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sun, 28 Feb 2016 02:22:38 -0800 Subject: [PATCH] Updated project for bootstrap 4, alpha 2 * Added support for postcss and tether for Bootstrap 4. --- .bootstraprc-4-default | 1 + CHANGELOG.md | 14 +- README.md | 40 +++++ examples/basic/.bootstraprc-4-example | 1 + examples/basic/app/markup/bootstrap-dev.html | 137 ++++++++++++++++-- examples/basic/app/markup/bootstrap-prod.html | 137 ++++++++++++++++-- .../app/styles/bootstrap/customizations.scss | 2 +- examples/basic/package.json | 9 +- examples/basic/webpack.dev.config.js | 17 ++- examples/basic/webpack.prod.config.js | 21 ++- examples/css-modules/.bootstraprc-4-example | 1 + .../components/CardColumns/CardColumns.jsx | 79 ++++++++++ .../components/CardColumns/CardColumns.scss | 3 + .../FontAwesomeIcons/FontAwesomeIcons.jsx | 29 ++++ .../FontAwesomeIcons.scss} | 0 .../app/components/GlyphIcons/GlyphIcons.jsx | 29 ++++ .../app/components/GlyphIcons/GlyphIcons.scss | 14 ++ .../app/components/Icons/Icons.jsx | 26 ---- examples/css-modules/app/layout/Layout.jsx | 8 +- examples/css-modules/package.json | 12 +- examples/css-modules/webpack.dev.config.js | 22 ++- examples/css-modules/webpack.prod.config.js | 19 ++- 22 files changed, 550 insertions(+), 71 deletions(-) create mode 100644 examples/css-modules/app/components/CardColumns/CardColumns.jsx create mode 100644 examples/css-modules/app/components/CardColumns/CardColumns.scss create mode 100644 examples/css-modules/app/components/FontAwesomeIcons/FontAwesomeIcons.jsx rename examples/css-modules/app/components/{Icons/Icons.scss => FontAwesomeIcons/FontAwesomeIcons.scss} (100%) create mode 100644 examples/css-modules/app/components/GlyphIcons/GlyphIcons.jsx create mode 100644 examples/css-modules/app/components/GlyphIcons/GlyphIcons.scss delete mode 100644 examples/css-modules/app/components/Icons/Icons.jsx diff --git a/.bootstraprc-4-default b/.bootstraprc-4-default index 21044fab..3afd107b 100644 --- a/.bootstraprc-4-default +++ b/.bootstraprc-4-default @@ -12,6 +12,7 @@ useFlexbox: true styleLoaders: - style - css + - postcss - sass # Extract styles to stand-alone css file diff --git a/CHANGELOG.md b/CHANGELOG.md index bb546d20..ac48b826 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ # Change Log +All notable changes to this project will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version. -See [GitHub Releases section](https://github.com/shakacode/bootstrap-loader/releases). +Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version. +## [Unreleased] + +## [1.0.9] - 2016-02-28 +##### Fixed +- Updated to support Bootstrap 4, Alpha 2, including examples. See [#56](https://github.com/shakacode/bootstrap-loader/pull/56) by [justin808](https://github.com/justin808). + +## [1.0.8] + +[Unreleased]: https://github.com/shakacode/bootstrap-loader/compare/1.0.9...master +[1.0.9]: https://github.com/shakacode/bootstrap-loader/compare/1.0.8...1.0.9 +[1.0.8]: https://github.com/shakacode/bootstrap-loader/compare/1.0.7...1.0.8 diff --git a/README.md b/README.md index 226fe953..2d126ecf 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,19 @@ Successor 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 & 4 are supported. +**NOTE:** [Bootstrap 4](http://v4-alpha.getbootstrap.com/), (twbs/bootstrap)[https://github.com/twbs/bootstrap] is currently in alpha right now. Bootstrap 4 definitely worked when we first released this package. The parent company of this product, [ShakaCode](http://www.shakacode.com) had originally planned to use it for our upcoming commercial product, but we decided that Bootstrap 4 was changing to fast for a production product. Thus, we're still using Bootstrap 3, and we're not actively developing with Bootstrap 4. Consequently, for Bootstrap 4 issues, we need one of: + +1. Community support to help us with Bootstrap 4 issues and pull requests. +2. We'd be thrilled to have another maintainer join us to help with Bootstrap 4 issues. +3. We'd also be thrilled if any companies are open to sponsoring the development of features and issues regarding Bootstrap 4. + +That being said, Bootstrap 4 probably works just fine! + +## NEWS + +2016-02-28: Released 1.0.9. Updated to support Bootstrap 4, alpha 2! + + ## Installation Get it via npm: @@ -41,6 +54,8 @@ entry: [ 'bootstrap-loader', './app' ] Config is optional. It can be placed in 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 is optional. It can be placed in 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. + ```yaml --- # You can use comments here @@ -247,6 +262,31 @@ Enable / disable flexbox model. useFlexbox: true ``` +#### Tether +Additionally, Bootstrap 4 requires Tether. You can add Tether per the examples in the `/examples` directory. + +1. Add tether to package.json: `npm i --save tether` +2. Add tether as an entry point to your webpack config. +3. Add this plugin to your webpack config: + +``` + plugins: [ + new ExtractTextPlugin('app.css', { allChunks: true }), + new webpack.ProvidePlugin({ + "window.Tether": "tether" + }), + ], +``` + +#### PostCSS +Bootstrap 4 seems to require postcss: + +1. Add postcss and the the postcss-loader: `npm i --save postcss postcss-loader` +2. Put `postcss` before `sass` in the order of loaders in your `.bootstraprc` file. + +#### Glyphicons +Glyphicons have been removed from Bootstrap 4. The examples demonstrate how to use the font-awesome-loader + ## Additional configurations #### Paths to custom assets diff --git a/examples/basic/.bootstraprc-4-example b/examples/basic/.bootstraprc-4-example index cbceaedd..3f04aac0 100644 --- a/examples/basic/.bootstraprc-4-example +++ b/examples/basic/.bootstraprc-4-example @@ -12,6 +12,7 @@ useFlexbox: true styleLoaders: - style - css + - postcss - sass # Extract styles to stand-alone css file diff --git a/examples/basic/app/markup/bootstrap-dev.html b/examples/basic/app/markup/bootstrap-dev.html index aeed2715..d383afdf 100644 --- a/examples/basic/app/markup/bootstrap-dev.html +++ b/examples/basic/app/markup/bootstrap-dev.html @@ -8,33 +8,142 @@
-

Hello, world!

-

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+

This is a simple hero unit, a simple jumbotron-style component for calling + extra attention to featured content or information.

-

It uses utility classes for typography and spacing to space content out within the larger container.

+

It uses utility classes for typography and spacing to space content out within the + larger container.

- + Learn more

-
-
- - It. +
+

Glyphicons (not available for Bootstrap 4!)

+
+
+ + It. +
+
+ + Just. +
+
+ + Works. +
+
+
+ +
+

Font Awesome using the font-awesome-loader

+
+
+ + It. +
+
+ + Just. +
+
+ + Works. +
-
- - Just. +
+ +
+

Bootstrap 4 card component

+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
-
- - Works. +
+ +
+

Bootstrap 4 card columns

+
+
+
+

Card title that wraps to a new line

+

This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a + ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+

Card title

+

This card has supporting text below as a natural lead-in to + additional content.

+

+ Last updated 3 mins ago +

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

+
+ + Someone famous in Source Title + +
+
+
+
+

Card title

+

This card has supporting text below as a natural lead-in to + additional content.

+

+ Last updated 3 mins ago +

+
+
+ Card image +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a + ante.

+
+ + Someone famous in Source Title + +
+
+
+
+

Card title

+

This is a wider card with supporting text below as a natural + lead-in to additional content. This card has even longer content than the first to + show that equal height action.

+

+ Last updated 3 mins ago +

+
diff --git a/examples/basic/app/markup/bootstrap-prod.html b/examples/basic/app/markup/bootstrap-prod.html index b96c4383..05fa7fb9 100644 --- a/examples/basic/app/markup/bootstrap-prod.html +++ b/examples/basic/app/markup/bootstrap-prod.html @@ -10,33 +10,142 @@
-

Hello, world!

-

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+

This is a simple hero unit, a simple jumbotron-style component for calling + extra attention to featured content or information.

-

It uses utility classes for typography and spacing to space content out within the larger container.

+

It uses utility classes for typography and spacing to space content out within the + larger container.

- + Learn more

-
-
- - It. +
+

Glyphicons (not available for Bootstrap 4!)

+
+
+ + It. +
+
+ + Just. +
+
+ + Works. +
+
+
+ +
+

Font Awesome using the font-awesome-loader

+
+
+ + It. +
+
+ + Just. +
+
+ + Works. +
-
- - Just. +
+ +
+

Bootstrap 4 card component

+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
-
- - Works. +
+ +
+

Bootstrap 4 card columns

+
+
+
+

Card title that wraps to a new line

+

This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a + ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+

Card title

+

This card has supporting text below as a natural lead-in to + additional content.

+

+ Last updated 3 mins ago +

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

+
+ + Someone famous in Source Title + +
+
+
+
+

Card title

+

This card has supporting text below as a natural lead-in to + additional content.

+

+ Last updated 3 mins ago +

+
+
+ Card image +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a + ante.

+
+ + Someone famous in Source Title + +
+
+
+
+

Card title

+

This is a wider card with supporting text below as a natural + lead-in to additional content. This card has even longer content than the first to + show that equal height action.

+

+ Last updated 3 mins ago +

+
diff --git a/examples/basic/app/styles/bootstrap/customizations.scss b/examples/basic/app/styles/bootstrap/customizations.scss index 358ccd95..0fcac4dd 100644 --- a/examples/basic/app/styles/bootstrap/customizations.scss +++ b/examples/basic/app/styles/bootstrap/customizations.scss @@ -8,4 +8,4 @@ $btn-primary-bg: adjust-hue($btn-primary-bg, +20deg); // NOTE: $gray-dark is defined in _variables.scss -$body-bg: $gray-dark; +$body-bg: $gray-light; diff --git a/examples/basic/package.json b/examples/basic/package.json index e9b20c38..962106f0 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -32,9 +32,14 @@ ], "license": "MIT", "dependencies": { - "bootstrap": "github:twbs/bootstrap#v4.0.0-alpha", + "bootstrap": "^4.0.0-alpha.2", "bootstrap-sass": "^3.3.5", - "jquery": "^2.1.4" + "font-awesome": "^4.5.0", + "font-awesome-loader": "^0.0.1", + "jquery": "^2.1.4", + "postcss": "^5.0.17", + "postcss-loader": "^0.8.1", + "tether": "^1.2.0" }, "devDependencies": { "autoprefixer": "^6.1.0", diff --git a/examples/basic/webpack.dev.config.js b/examples/basic/webpack.dev.config.js index a6de1320..73fa627a 100644 --- a/examples/basic/webpack.dev.config.js +++ b/examples/basic/webpack.dev.config.js @@ -1,3 +1,6 @@ +// Very similar to webpack.prod.config.js. Common parts could be extracted to a base config. +// See example at: +// https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js const webpack = require('webpack'); const path = require('path'); const autoprefixer = require('autoprefixer'); @@ -6,6 +9,8 @@ module.exports = { entry: [ 'webpack-hot-middleware/client', + 'tether', + 'font-awesome-loader', 'bootstrap-loader', './app/scripts/app', ], @@ -23,13 +28,23 @@ module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), + new webpack.ProvidePlugin({ + "window.Tether": "tether" + }), ], module: { loaders: [ { test: /\.css$/, loaders: [ 'style', 'css', 'postcss' ] }, { test: /\.scss$/, loaders: [ 'style', 'css', 'postcss', 'sass' ] }, - { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' }, + { + test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "url?limit=10000" + }, + { + test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, + loader: 'file' + }, // Use one of these to serve jQuery for Bootstrap scripts: diff --git a/examples/basic/webpack.prod.config.js b/examples/basic/webpack.prod.config.js index ee16935d..486ba0f3 100644 --- a/examples/basic/webpack.prod.config.js +++ b/examples/basic/webpack.prod.config.js @@ -1,3 +1,7 @@ +// Very similar to webpack.dev.config.js. Common parts could be extracted to a base config. +// See example at: +// https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js +const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); const autoprefixer = require('autoprefixer'); @@ -7,7 +11,9 @@ module.exports = { // For production build we want to extract CSS to stand-alone file // Provide `extractStyles` param and `bootstrap-loader` will handle it entry: [ + 'font-awesome-loader', 'bootstrap-loader/extractStyles', + 'tether', './app/scripts/app', ], @@ -20,13 +26,26 @@ module.exports = { plugins: [ new ExtractTextPlugin('app.css', { allChunks: true }), + new webpack.ProvidePlugin({ + "window.Tether": "tether" + }), ], module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss') }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!sass') }, - { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' }, + + { + test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin + // loader: "url?limit=10000" + loader: "url" + }, + { + test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, + loader: 'file' + }, // Use one of these to serve jQuery for Bootstrap scripts: diff --git a/examples/css-modules/.bootstraprc-4-example b/examples/css-modules/.bootstraprc-4-example index 1fb8d384..829123d4 100644 --- a/examples/css-modules/.bootstraprc-4-example +++ b/examples/css-modules/.bootstraprc-4-example @@ -12,6 +12,7 @@ useFlexbox: true styleLoaders: - style - css + - postcss - sass # Extract styles to stand-alone css file diff --git a/examples/css-modules/app/components/CardColumns/CardColumns.jsx b/examples/css-modules/app/components/CardColumns/CardColumns.jsx new file mode 100644 index 00000000..46908162 --- /dev/null +++ b/examples/css-modules/app/components/CardColumns/CardColumns.jsx @@ -0,0 +1,79 @@ +import React from 'react'; + +import css from './CardColumns.scss'; + +export default class CardColumns extends React.Component { + + render() { + return ( +
+

Card Columns example (only applies to Bootstrap 4) and you need postcss

+
+
+
+

Card title that wraps to a new line

+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+

Card title

+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

+
+ + Someone famous in Source Title + +
+
+
+
+

Card title

+

This card has supporting text below as a natural lead-in to additional content.

+

Last updated 3 mins ago

+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+
+
+
+

Card title

+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+

Last updated 3 mins ago

+
+
+
+ ); + } +} diff --git a/examples/css-modules/app/components/CardColumns/CardColumns.scss b/examples/css-modules/app/components/CardColumns/CardColumns.scss new file mode 100644 index 00000000..5ddc7c31 --- /dev/null +++ b/examples/css-modules/app/components/CardColumns/CardColumns.scss @@ -0,0 +1,3 @@ +.pinkCard { + background: pink; +} diff --git a/examples/css-modules/app/components/FontAwesomeIcons/FontAwesomeIcons.jsx b/examples/css-modules/app/components/FontAwesomeIcons/FontAwesomeIcons.jsx new file mode 100644 index 00000000..20b63e9e --- /dev/null +++ b/examples/css-modules/app/components/FontAwesomeIcons/FontAwesomeIcons.jsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import css from './FontAwesomeIcons.scss'; + +export default class FontAwesomeIcons extends React.Component { + + render() { + return ( +
+

Font Awesome icons work with both Bootstrap 3 and Bootstrap 4

+

Font Awesome using the font-awesome-loader

+
+
+ + It. +
+
+ + Just. +
+
+ + Works. +
+
+
+ ); + } +} diff --git a/examples/css-modules/app/components/Icons/Icons.scss b/examples/css-modules/app/components/FontAwesomeIcons/FontAwesomeIcons.scss similarity index 100% rename from examples/css-modules/app/components/Icons/Icons.scss rename to examples/css-modules/app/components/FontAwesomeIcons/FontAwesomeIcons.scss diff --git a/examples/css-modules/app/components/GlyphIcons/GlyphIcons.jsx b/examples/css-modules/app/components/GlyphIcons/GlyphIcons.jsx new file mode 100644 index 00000000..cbc0c8b9 --- /dev/null +++ b/examples/css-modules/app/components/GlyphIcons/GlyphIcons.jsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import css from './GlyphIcons.scss'; + +export default class GlyphIcons extends React.Component { + + render() { + return ( +
+

Glyphicons only work with Bootstrap 3. You won't see icons in Bootstrap 4

+
+
+ + It. +
+
+ + Just. +
+
+ + Works. +
+
+
+ ); + } + +} diff --git a/examples/css-modules/app/components/GlyphIcons/GlyphIcons.scss b/examples/css-modules/app/components/GlyphIcons/GlyphIcons.scss new file mode 100644 index 00000000..718904bb --- /dev/null +++ b/examples/css-modules/app/components/GlyphIcons/GlyphIcons.scss @@ -0,0 +1,14 @@ +.colItems { + margin: 70px 0; + + .colItem { + font-size: 50px; + text-align: center; + + .text { + display: block; + font-size: 30px; + color: #333; + } + } +} diff --git a/examples/css-modules/app/components/Icons/Icons.jsx b/examples/css-modules/app/components/Icons/Icons.jsx deleted file mode 100644 index aac06ab6..00000000 --- a/examples/css-modules/app/components/Icons/Icons.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import css from './Icons.scss'; - -export default class Icons extends React.Component { - - render() { - return ( -
-
- - It. -
-
- - Just. -
-
- - Works. -
-
- ); - } - -} diff --git a/examples/css-modules/app/layout/Layout.jsx b/examples/css-modules/app/layout/Layout.jsx index 22bba124..3a402ca0 100644 --- a/examples/css-modules/app/layout/Layout.jsx +++ b/examples/css-modules/app/layout/Layout.jsx @@ -1,7 +1,9 @@ import React from 'react'; import Jumbotron from '../components/Jumbotron/Jumbotron'; -import Icons from '../components/Icons/Icons'; +import GlyphIcons from '../components/GlyphIcons/GlyphIcons'; +import FontAwesomeIcons from '../components/FontAwesomeIcons/FontAwesomeIcons'; +import CardColumns from '../components/CardColumns/CardColumns'; import css from './Layout.scss'; @@ -11,7 +13,9 @@ export default class Layout extends React.Component { return (
- + + +
); } diff --git a/examples/css-modules/package.json b/examples/css-modules/package.json index 251fa727..b5309b79 100644 --- a/examples/css-modules/package.json +++ b/examples/css-modules/package.json @@ -36,10 +36,18 @@ "webpack" ], "dependencies": { - "bootstrap": "github:twbs/bootstrap#v4.0.0-alpha", + "body-parser": "^1.15.0", + "bootstrap": "^4.0.0-alpha.2", "bootstrap-sass": "^3.3.5", + "express": "^4.13.4", + "font-awesome": "^4.5.0", + "font-awesome-loader": "^0.0.1", + "nodemon": "^1.9.1", + "postcss": "^5.0.17", + "postcss-loader": "^0.8.1", "react": "^0.14.2", - "react-dom": "^0.14.2" + "react-dom": "^0.14.2", + "tether": "^1.2.0" }, "devDependencies": { "autoprefixer": "^6.1.0", diff --git a/examples/css-modules/webpack.dev.config.js b/examples/css-modules/webpack.dev.config.js index 262d7c31..b6e3bdcc 100644 --- a/examples/css-modules/webpack.dev.config.js +++ b/examples/css-modules/webpack.dev.config.js @@ -1,3 +1,6 @@ +// Very similar to webpack.prod.config.js. Common parts could be extracted to a base config. +// See example at: +// https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js const webpack = require('webpack'); const path = require('path'); const autoprefixer = require('autoprefixer'); @@ -6,6 +9,8 @@ module.exports = { entry: [ 'webpack-hot-middleware/client', + 'tether', + 'font-awesome-loader', 'bootstrap-loader', './app/startup/App', ], @@ -18,18 +23,21 @@ module.exports = { devtool: '#cheap-module-eval-source-map', - resolve: { extensions: [ '', '.js', '.jsx' ] }, + resolve: { extensions: ['', '.js', '.jsx'] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), + new webpack.ProvidePlugin({ + "window.Tether": "tether" + }), ], module: { loaders: [ { test: /\.jsx?$/, - loaders: [ 'babel' ], + loaders: ['babel'], exclude: /node_modules/, }, { @@ -50,12 +58,16 @@ module.exports = { ], }, { - test: /\.(woff2?|ttf|eot|svg)$/, - loaders: [ 'url?limit=10000' ], + test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "url?limit=10000" + }, + { + test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, + loader: 'file' }, ], }, - postcss: [ autoprefixer ], + postcss: [autoprefixer], }; diff --git a/examples/css-modules/webpack.prod.config.js b/examples/css-modules/webpack.prod.config.js index 0817741a..619d3be4 100644 --- a/examples/css-modules/webpack.prod.config.js +++ b/examples/css-modules/webpack.prod.config.js @@ -1,3 +1,6 @@ +// Very similar to webpack.dev.config.js. Common parts could be extracted to a base config. +// See example at: +// https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); @@ -8,7 +11,9 @@ module.exports = { // For production build we want to extract CSS to stand-alone file // Provide `extractStyles` param and `bootstrap-loader` will handle it entry: [ + 'font-awesome-loader', 'bootstrap-loader/extractStyles', + 'tether', './app/startup/App', ], @@ -26,6 +31,9 @@ module.exports = { 'NODE_ENV': JSON.stringify('production'), }, }), + new webpack.ProvidePlugin({ + "window.Tether": "tether" + }), ], module: { @@ -52,9 +60,16 @@ module.exports = { '!sass' ), }, + + { + test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin + // loader: "url?limit=10000" + loader: "url" + }, { - test: /\.(woff2?|ttf|eot|svg)$/, - loaders: [ 'url?limit=10000' ], + test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, + loader: 'file' }, ], },