webpack 2.7 won't load blueprintjs core css

Question

I'm trying to use blueprintjs and when i'm importing its css. And i think i made something wrong in my webpack config so I see this error

there is my webpack config

const ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
var path = require("path");

module.exports={
    entry: './src/index.js',
    output:{
        path: __dirname + "/public",
        filename:'bundle.js',
        publicPath: "/public/"
    },
    devServer: {
        inline: true,
        contentBase: './public',
        port: 3000
    },
    module:{
        rules: [
            {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: "babel-loader",
            query: {
                presets: ['es2015', 'react', 'stage-0'],

            }
        }, 
        {
             test: /\.s(a|c)ss$/, 
                loader: ExtractTextPlugin.extract({loader: ['css-loader', 'sass-loader', 'style-loader']})
              },
              {
                test: /\.css$/,
                use: [
                  {
                    loader: 'style-loader',
                  },
                  {
                    loader: 'css-loader',
                  },
                ],
              },
              {
                test: /\.(|gif||svg|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: 'file-loader', options: {name: '[name].[ext]'}
              },  {
                test: /\.(png|jpg|)$/,
                loader: 'url-loader?limit=200000'
              },
        ] 
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
      ]

}

i'm using "webpack": "^2.7.0","@blueprintjs/core": "^1.34.1" and a lot of loaders

i tried to import my css like this

require('!css-loader!./index.css');

and just like this

import styles from './index.css'

the result is the same

after extra couple hours of work i got this error

at this point i'm not sure what's wrong with my webpack and how to fix it at all any suggestions are welcome

Answer 1

Try using the full path to blueprint.css inside the NPM package. The webpack error in the screenshot clearly shows the css-loader trying to load esm/index.js, a JS file, so of course it fails.

Try: @import "~@blueprintjs/core/lib/css/blueprint.css";

Answer 2

You can compare your webpack configuration with the one in the Blueprint monorepo: https://github.com/palantir/blueprint/tree/develop/packages/webpack-build-scripts

Try applying loaders in the same order as in the base config: ['style-loader', 'css-loader', 'sass-loader']