3

I'm trying to use blueprintjs so I followed the tutorial with this line:

main.sass

@import "~@blueprintjs/core";

However my webpack-dev-server gives me this error log:

ERROR in ./node_modules/css-loader?{"minimize":false}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/packs/main.sass
Module build failed:
 */
  ^
      Invalid CSS after " */": expected 1 selector or at-rule, was '"use strict";'
      in <redacted>/node_modules/@blueprintjs/core/dist/index.js (line 6, column 4)
webpack: Failed to compile.

So I'm confused why it's trying to parse an index.js file as sass into css!

Looking at ./config/webpack/loaders/sass.js, which I haven't touched:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

I only see it trying to read sass, scss and css files. Any ideas what I'm missing or should check?

Alf
  • 832
  • 1
  • 8
  • 17

2 Answers2

2

You are receiving an error because in you main.sass file you are importing a JS module. ~@blueprintjs/core resolves to node_modules/@blueprintjs/core/dist/index.js and thus you are getting JS mixed in the process.

You should see what files the blueprintjs/core/dist folder contains and only import sass/scss/css files to make your build.

Pavel Denisjuk
  • 1,475
  • 12
  • 13
  • I tried importing just `blueprintjs/core/dist/blueprint.css` but also got a problem where it looked webpack was trying to import js files. Also, from the documentation here: http://blueprintjs.com/docs/#blueprint.npm-installation it seems like the authors want us to just import `~@blueprintjs/core` Shouldn't the webpack loader know to only load css/sass/scss files? – Alf Jul 24 '17 at 03:25
  • 1
    To webpack, everything you import/require is just a `module`. It doesn't care if it is JS or any other file (even JPEG). From their docs, it says that `blueprint/core` contains everything (JS and CSS) - that means you should just import that whole library from your JS file. Webpack in turn will take care of passing child imports to appropriate loaders (like CSS or static files). So simply remove your `main.sass` and move the import statement to, for example, entry point of your app. – Pavel Denisjuk Jul 24 '17 at 08:50
0

you just need to add the code below on your App.css file

@import "~@blueprintjs/core/dist/blueprint.css";

jsina
  • 4,433
  • 1
  • 30
  • 28