First-class support for @import'ing blueprint scss files

[dmackerman]

Given this import:

@import "node_modules/@blueprintjs/core/src/blueprint.scss";

Webpack is throwing an error

ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./src/styles/app.scss
Module build failed: 
@import "../node_modules/bourbon/app/assets/stylesheets/bourbon";
^
      File to import not found or unreadable: ../node_modules/bourbon/app/assets/stylesheets/bourbon
Parent style sheet: /Users/dave/www/portalv3/node_modules/@blueprintjs/core/src/common/_font-imports.scss
      in /Users/dave/www/portalv3/node_modules/@blueprintjs/core/src/common/_font-imports.scss (line 4, column 1)
...

The path to ../node_modules/bourbon/app/assets/stylesheets/bourbon is invalid, as bourbon isn't installed as a dependency because it's listed under devDependencies. Is this library not intended to allow users to override the variables?

[Ciantic]

I got this error as well as I use webpack.

I tried also with dist css file:

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

ERROR in ./~/@blueprintjs/core/dist/assets/icons-20.eot
Module parse failed: ...\node_modules\@blueprintjs\core\dist\assets\icons-20.eot Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

with .scss file I get same error as parent.

There needs to be official docs how to use the library with the webpack loaders. Webpack should be perfect tool for this, since it should be able to pack all the resources in blueprint without me adding lines to the html file.

[Ciantic]

I propose to change the title of bug "how to use this with webpack"

[dmackerman]

@Ciantic It does work with the generated .css files, you have to use the Webpack alias resolution ~ character to point to node_modules.

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

Your error is because you don't have a loader configured to handle eot files (and such). Add these to your webpack config.

Edit - Updated to Webpack 2 config style:

{
  test: /\.(woff|woff2)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: 'fonts/[hash].[ext]',
      limit: 5000,
      mimetype: 'application/font-woff'
    }
  }
}, {
  test: /\.(ttf|eot|svg)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: 'fonts/[hash].[ext]'
    }
  }
}

Make sure you have url-loader and file-loader installed.

npm install file-loader url-loader --saveDev (or yarn add --dev)

[Ciantic]

@dmackerman I'm getting the same error with tilde also:

ERROR in ./~/@blueprintjs/core/dist/assets/icons-16.eot
Module parse failed: \node_modules\@blueprintjs\core\dist\assets\icons-16.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./~/@blueprintjs/core/dist/blueprint.css 6:484-516
 @ ./~/css-loader!./~/sass-loader!./App/Styles.scss
ERROR in ./~/@blueprintjs/core/dist/assets/icons-16.ttf
Module parse failed: \node_modules\@blueprintjs\core\dist\assets\icons-16.ttf Unexpected character '

I threw the @import inside my scss file.

Maybe it's conflicting with something else.

PS. I also have file loader in place:

{ test: /\.(jpg|png|woff|eot|ttf|gif)$/, loader: "file-loader?name=[name].[ext]", include: appDir }

[Ciantic]

@dmackerman sorry, I didn't read your post throughly. Now it works as I threw more stuff you said there.

Though I think this should be documented in the blueprint, webpack is probably most common way to pack the apps these days.

[dmackerman]

Agreed. At the very least importing the SCSS files should work. Just seems like a dependency issue in the package. Will keep an eye on this.

[giladgray]

thanks @dmackerman for explaining webpack usage. users will need to install the appropriate loaders in order to import the CSS in webpack.

as for SCSS usage, one missing import should be easy enough to install locally as a workaround. we'll move bourbon into the regular dependencies array in the next release.

[dmackerman]

No problem @giladgray. I can work up a quick PR for the docs.

[Ciantic]

I'm now also experimenting with SCSS file in webpack. Bourbon is not the only problem.

If I include the scss file: @import "~@blueprintjs/core/src/blueprint.scss";

I get bunch of other errors, one: the paths to bourbon are relative to wrong directory. Second, the resources are missing so icons don't compile.

[Ciantic]

Here is how to get it working until the project is fixed to work with SCSS importing:

1. delete line about $icon-font-path in src/common/_font_imports.scss
2. Change @import "common/variables"; to @import "variables"; in src/common/_font_imports.scss
3. Search and replace: (\.\.\/)+node_modules/bourbon/ with ~bourbon/ in all files
4. Add:

$icon-font-path: "../node_modules/@blueprintjs/core/dist/assets";
@import "~@blueprintjs/core/src/blueprint.scss";

To your SCSS file in webpack project.

P.S. I think all SCSS variables should be defined with !default: $example: 'value' !default; so one could override them easily.

Edit Added 2. step, forgot it

[adidahiya]

This thread has a handful of good suggestions; I'm going to rename it to be more accurate -- I think its scope should be more than simply "make the bourbon import work".

[corbmanj]

This was super helpful. Please consider adding a section in the Blueprint docs about usage with webpack.

[giladgray]

after some deliberation, it seems that adding !default to the color variables is the path of least resistance for most users. if your codebase ends up setting $blue3: gray then that's on you to maintain 🙅

worth noting that most components do use alias variables for all their coloring. we're not 100% on this practice but we're close enough that you should be able to customize most things without touching the colors themselves.

[giladgray]

closing this as #377 has merged! feel free to re-open or file new issues if future sass issues arise.

[derekharmel]

I'm still struggling with this problem after trying most of the suggestions in this thread. For reference, I have 1.6 installed.

At first, I was having a problem with bourbon not resolving. Eventually I figured out that npm install bourbon --save would get me past that problem. I didn't see that documented anywhere, so just making a note of it here.

Now, when I include the following in my application.sass

@import "~@blueprintjs/core/src/blueprint"

Webpack produces the following for each of the files in resources/icons:

ERROR in ./~/css-loader!./~/sass-loader!./app/assets/stylesheets/application.sass
Module not found: Error: Can't resolve '../resources/icons/icons-16.eot' in '/Users/dharmel/Code/project/app/assets/stylesheets'
 @ ./~/css-loader!./~/sass-loader!./app/assets/stylesheets/application.sass 6:24215-24257

My webpack loaders are nothing special:

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

I'm still a bit of a webpack noob and haven't been able to figure out a way to work around this problem.

[dmackerman]

@derekharmel You have to update the icon path before you import it.

$icon-font-path: "~@blueprintjs/core/resources/icons";

[derekharmel]

Doh! Thanks @dmackerman! I had tried that before, but apparently not after, figuring out the bourbon issue.

[bsr203]

to anyone following, installing bourbon, and then importing like below solved it for me.

cheers.

yarn add bourbon

$icon-font-path: "~@blueprintjs/core/resources/icons";

@import "~@blueprintjs/core/src/blueprint.scss";

[mtt87]

I'm using create-react-app and after a lot of pain I was able to make it work with these steps

1. go inside node_modules/@blueprintjs/core and do npm install this will install the right version of bourbon
2. npm install node-sass-tilde-importer --save-dev
3. edit package.json scripts

"scripts": {
    ...
    "build": "npm run build-css && react-scripts build",
    "build-css": "node-sass src/ -o src/ --importer=node_modules/node-sass-tilde-importer",
    ...
  }

It's the first time I found it so difficult to import a sass into a project, I don't fully understand the use of import with tilde @import "~bourbon/app/assets/stylesheets/bourbon";

That said, thanks for this great open source!

[adidahiya]

@mtt87 step 1 shouldn't be necessary. just add a dev dependency on bourbon that matches blueprint's:

blueprint/packages/core/package.json

Line 25 in 6fcf038

"bourbon": "4.3.2",

.

anyway, we're going to remove the bourbon dependency completely in the near future #875

[mtt87]

@adidahiya to be honest that way doesn't work, I just tried.
I suspect the tilde importer for node-sass can't go back that far in the tree to find bourbon but I might be wrong.

Glad you are removing the bourbon dependency 😄

[giladgray]

@mtt87 we use node-sass-package-importer. perhaps you'd have more success using that one?

[mtt87]

@giladgray worked like a charm 😄
Thank you

[condemil]

@mtt87 I am trying to use create-react-app and have same issues. Can you describe how you made it work with node-sass-package-importer?

[mtt87]

@condemil Sure, this is my setup
index.scss

$icon-font-path: "~@blueprintjs/core/resources/icons";

@import "../node_modules/@blueprintjs/core/src/blueprint";
@import "../node_modules/@blueprintjs/datetime/dist/blueprint-datetime.css";
...

package.json

"scripts": {
    "start-js": "react-scripts start",
    "start": "npm run start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "./deploy.sh",
    "build-css": "node-sass src/ -o src/ --importer=node_modules/node-sass-package-importer/dist/cli.js",
    "watch-css": "npm run build-css && node-sass src/ -o src/ --importer=node_modules/node-sass-package-importer/dist/cli.js --watch --recursive"
  }

I'm not sure (haven't coded on that project recently) but I think I had to run the build-css script manually cause watch-css wasn't working properly (there was like an infinite loop)

[Ciantic]

Hmm, why it works just fine for me when using webpack and this: @import "~@blueprintjs/core/dist/blueprint.css"; why are people having such a problems?

Is the new issue when using without webpack? For me it works with simply above in webpack.

[mtt87]

@Ciantic you are importing the css we are importing sass for a custom build.

[Sigfried]

Thanks @Ciantic @condemil @mtt87

I'm using create-react-app. When I tried to follow the docs and put

@import "~@blueprintjs/core";

in one of my .css files, I got errors. Including from index.html didn't work. But then I had success putting this in my .css:

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

[russbeye]

First, thanks for the long thread and tips found in here. I was having the same error using @import "~@blueprintjs/core/src/blueprint.scss"; until I saw @adidahiya's tip further up. Worked like a charm! Saw that the Bourbon dependency was removed from master for the upcoming 2.0 release though. Definitely a good step forward. Thanks again!

[lhlmgr]

@Sigfried Hm.. I just tried it with a fresh install of create-react-app and blueprintjs, but unfortunately it doesn't work. I added the line @import "~@blueprintjs/core/dist/blueprint.css"; on the top of App.css but it doesn't seem to import the file correctly.

[giladgray]

@lhlmgr your css path is wrong for version 2.0. try lib/css/blueprint.css.

[lhlmgr]

@giladgray thanks for your fast response and the info! Unfortunately it is still "@blueprintjs/core": "^1.35.4". I double checked the path, and it seems there exists no lib/css/blueprint.css.

[giladgray]

ah then the error is probably that @import "~package" is not valid CSS syntax. it comes from webpack, and we use a special importer package in our Sass build to enable that statement. try unwinding it to relative path to .../path/to/node_modules/@blueprints/...

[lhlmgr]

Hm, its the same behaviour when using the line @import "~@blueprintjs/core/dist/blueprint.css";. The application compiles, but when I inspect the react-element e.g. a Label with the developer tools (chrome) it doesn't show me the pt-label-class style.

[giladgray]

did you try inspecting the DOM node, not the react element? don't know what to tell you, and this issue is closed.