Css-loader: How to import bootstrap

[leonprou]

Hey folks,
I wish to import bootstrap with webpack. My App.css got the following import:

@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';

And this is my loader:

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, '../node_modules/react-routing/src'),
          path.resolve(__dirname, '../src')
        ],
        loaders: [...(WATCH && ['react-hot']), 'babel-loader'],
      }, {
        test: /\.json$/,
        loader: 'json-loader',
      }, {
        test: /\.txt$/,
        loader: 'raw-loader',
      }, {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }, {
        test: /\.(eot|ttf|wav|mp3)$/,
        loader: 'file-loader',
      },  {
        test: /\.css$/,
        loader: 'style-loader/useable!css-loader!postcss-loader',
      },
    ],
  },

But I've got errors that fonts couldn't be found:

ERROR in ./~/css-loader!./~/postcss-loader!./src/components/App/App.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /Users/leonprouger/workspace/community/src/components/App
@ ./~/css-loader!./~/postcss-loader!./src/components/App/App.css 6:12309-12361 6:12384-12436
ERROR in ./~/css-loader!./~/postcss-loader!./src/components/App/App.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.woff2 in /Users/leonprouger/workspace/community/src/components/App
@ ./~/css-loader!./~/postcss-loader!./src/components/App/App.css 6:12486-12540
ERROR in ./~/css-loader!./~/postcss-loader!./src/components/App/App.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.woff in /Users/leonprouger/workspace/community/src/components/App
@ ./~/css-loader!./~/postcss-loader!./src/components/App/App.css 6:12571-12624
ERROR in ./~/css-loader!./~/postcss-loader!./src/components/App/App.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.ttf in /Users/leonprouger/workspace/community/src/components/App
@ ./~/css-loader!./~/postcss-loader!./src/components/App/App.css 6:12654-12706
ERROR in ./~/css-loader!./~/postcss-loader!./src/components/App/App.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.svg in /Users/leonprouger/workspace/community/src/components/App
@ ./~/css-loader!./~/postcss-loader!./src/components/App/App.css 6:12740-12792

[jul-]

Do you solved it?

[qel]

You need to have a loader setup for those extra file types.

This guy solved it:
https://github.com/webpack/css-loader/issues/38

[timothylombrana]

@qel this didnt work for me. have anymore suggestions please.

module: { loaders: [ { test: /\.css$/, loader: 'style!css', exclude: /node_modules/ }, { test: /\.less$/, loader: 'style!css!less' }, { test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url' }, { test: /\.js$/, loader: 'ng-annotate!babel', exclude: /node_modules/ }, { test: /\.html$/, loader: 'raw!html-minify', exclude: /node_modules/ } ] }

`ERROR in ../~/css-loader!./bootstrap.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /Users/Tim/Desktop/P/Placeholder/app
@ ../~/css-loader!./bootstrap.css 6:4445-4497 6:4520-4572

ERROR in ../~/css-loader!./bootstrap.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.woff2 in /Users/Tim/Desktop/P/Placeholder/app
@ ../~/css-loader!./bootstrap.css 6:4622-4676

ERROR in ../~/css-loader!./bootstrap.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.woff in /app
@ ../~/css-loader!./bootstrap.css 6:4707-4760

ERROR in ../~/css-loader!./bootstrap.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.ttf /app
@ ../~/css-loader!./bootstrap.css 6:4790-4842

ERROR in ../~/css-loader!./bootstrap.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.svg /app
@ ../~/css-loader!./bootstrap.css 6:4876-4928`

[urbanhusky]

Have you tried writing it like this:

@import '~bootstrap/dist/css/bootstrap.css';

Afaik, ~ defaults to node_modules - do not add a slash afterwards.

[timothylombrana]

@urbanhusky I will try this later today, hope it works!

[generalgmt]

This works for me: @import '~/node_modules/bootstrap/dist/bootstrap.css'

[d3viant0ne]

Issues are for feature requests & bugs. All support requests / questions should be done in either the Webpack Gitter or in Stack Overflow w/ the webpack tag