Webpack and Bootstrap

Posted 2 years ago by twiggy99

Hello,

I've been following the webpack video series and all is working brilliantly :) thank you Jeff!

I'm working on a legacy codeigniter application which I'm trying to update to use some more modern techniques so I'm now trying to import bootstrap in my SASS file like so: @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

(I installed bootstrap via npm install bootstrap-sass)

But I get the following errors:


ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:6761-6823 6:6846-6908
 @ ./application/src/css/main.scss
 @ ./application/src/js/main.js

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:6960-7024
 @ ./application/src/css/main.scss
 @ ./application/src/js/main.js

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:7057-7120
 @ ./application/src/css/main.scss
 @ ./application/src/js/main.js

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.ttf' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:7152-7214
 @ ./application/src/css/main.scss
 @ ./application/src/js/main.js

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:7250-7312
 @ ./application/src/css/main.scss
 @ ./application/src/js/main.js

ERROR in ./application/src/css/main.scss
Module build failed: Error
    at factoryCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/webpack/lib/Compilation.js:259:39)
    at /home/mark/Code/ena-shaw/es-admin/node_modules/webpack/lib/NormalModuleFactory.js:234:19
    at onDoneResolving (/home/mark/Code/ena-shaw/es-admin/node_modules/webpack/lib/NormalModuleFactory.js:59:20)
    at /home/mark/Code/ena-shaw/es-admin/node_modules/webpack/lib/NormalModuleFactory.js:126:20
    at /home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:3694:9
    at /home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:359:16
    at iteratorCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:933:13)
    at /home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:843:16
    at /home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:3691:13
    at apply (/home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:21:25)
    at /home/mark/Code/ena-shaw/es-admin/node_modules/async/dist/async.js:56:12
    at /home/mark/Code/ena-shaw/es-admin/node_modules/webpack/lib/NormalModuleFactory.js:121:22
    at onResolved (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/home/mark/Code/ena-shaw/es-admin/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /home/mark/Code/ena-shaw/es-admin/node_modules/tapable/lib/Tapable.js:283:15
    at /home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/home/mark/Code/ena-shaw/es-admin/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /home/mark/Code/ena-shaw/es-admin/node_modules/tapable/lib/Tapable.js:283:15
    at innerCallback (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/home/mark/Code/ena-shaw/es-admin/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

ERROR in /home/mark/Code/ena-shaw/es-admin/node_modules/extract-text-webpack-plugin/loader.js??ref--1-0!/home/mark/Code/ena-shaw/es-admin/node_modules/style-loader/index.js!/home/mark/Code/ena-shaw/es-admin/node_modules/css-loader/index.js!/home/mark/Code/ena-shaw/es-admin/node_modules/sass-loader/lib/loader.js!/home/mark/Code/ena-shaw/es-admin/application/src/css/main.scss doesn't export content
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 1.46 kB {0} [built]
       [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 162 kB {0} [built]
    
    ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
    Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:6761-6823 6:6846-6908
    
    ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
    Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:6960-7024
    
    ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
    Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:7057-7120
    
    ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
    Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.ttf' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:7152-7214
    
    ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss
    Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/home/mark/Code/ena-shaw/es-admin/application/src/css'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./application/src/css/main.scss 6:7250-7312

I guess I need to include a new loader. After some research it seemed like I need the url-loader. so I added the following to my webpack.config file:

{
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                loader: 'url-loader'
 },

This hasn't made any difference. So my full modules array now looks like this:

module:{
        rules:[
            {
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                loader: 'url-loader'
            },
            {
                test: /\.s[ac]ss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader'], 
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

Has anyone gotten bootstrap working with SASS and webpack?

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.