How do I configure webpack to run bootstrap and sass?

Question

I am not great at webpack. I have not really \'learned it\', I have a template/boilerplate I pull from a repo I made that gives me an environment to build in React. I am str

Answer 1

Checkout the example from the sass-loader. Your webpack.config.js should look like this:

module.exports = {
    ...
    module: {
        loaders: [
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                loader: "file"
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

Since you've added a bunch of loaders, you should make sure that all of them are installed:

npm i file-loader style-loader css-loader sass-loader --save-dev

Then you should add your main.scss either as webpack entry to webpack.config.js...

module.exports = {
   ...
    entry: [
        path.resolve(__dirname, '..', 'path', 'to',  'main.scss'),
        // add other entries
    ],
    ...

... or just require/import it in your main.js:

require("./path/to/main.scss");

Since bootstrap needs its url() paths configured, you need to set the $icon-font-path before importing bootstrap. Your main.scss should look like this:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

And if you think @import "~bootstrap-sass/assets/stylesheets/bootstrap"; looks ugly, you can also add an alias to your webpack.config.js:

module.exports = {
   ...
    resolve: {
        alias: {
            "bootstrap-sass$": "bootstrap-sass/assets/stylesheets/bootstrap"
        }
    },

Then you just need to write:

@import "~bootstrap-sass";

Answer 2

Every extension you import, require or load any other way must have its own loader.

As of woff2 you might have added something like:

{
    test: /\.woff2$/,
    loader: 'url',
    query: {
        limit: 10240,
        name: 'static/[hash].[ext]'
    }
}

You might want to check the url-loader documentation about all the parameters it accepts.

You also may match multiple different filename patterns to use with the same loader, eg:

{
    test: /\.(eot|ttf|svg|png|gif|woff2?$/,
    loader: 'url',
    query: {
        limit: 10240,
        name: 'static/[hash].[ext]'
    }
}

This would load all those extensions.

Answer 3

It's probably something wrong with ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2 path. Bootstrap-sass requires it through the sass file but webpack can't find it.