Blueprint: 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.

[Ciantic]

Here is the way to use the bits of the package without modifications in SCSS webpack project.

It should have been obvious, but it was not for me. But this is best way to use blueprint if you need the variables, and the precompiled CSS file:

@import "~@blueprintjs/core/dist/blueprint.css";
@import "~@blueprintjs/core/src/common/colors";
@import "~@blueprintjs/core/src/common/color-aliases";
@import "~@blueprintjs/core/src/common/variables";

This way you can use the variables ($pt-grid-size, $pt-dark-app-background-color, ...) in your components. However, you can't override the variables because it's using the precompiled CSS file.

I think I prefer this until there is something else. But this has one extra advantage, the big CSS file is not regenerated each time.

[giladgray]

@Ciantic this is even better:

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

the dist/ directory contains variables.{less,scss} files that define every public variable. that file is produced from the three you listed above _and_ all the $pt-icon-* content strings.

[giladgray]

for posterity: v1.1.0 added support for @import "~package" syntax. so this issue is technically resolved, but this discussion is too great to close 😄.

[gregtillbrook]

Ive just setup the sass import (so I can override component colours etc) and thought Id share my steps to setup as recent commits have made things easier.

1. npm install --save bourbon
2. my webpack worked without changes but you may need add file-loader and url-loader (as noted above)
3. added the following lines to my root sass file;

$icon-font-path: "~@blueprintjs/core/resources/icons";
//define other override sass vars here
@import "~@blueprintjs/core/src/blueprint.scss";

I imported a few components to test (Switch, Slider, Dialog & Popover) and all looked good (I did see some "containerElement.query is not a function" errors which I haven't dug into yet - they may be due to me patching blueprint so it works with SSR [edit: it was - due to me chopping out dom4]).

[iyn]

Can somebody show me an example how to change the default colors? For example, when I'm doing it like this:

@import "~@blueprintjs/core/src/blueprint.scss";
$green1: green;
$green2: green;
$green3: green;
$green4: green;
$green5: green;

it works only with some components, while others (notably button) don't respect the settings. Thanks!

[SEAPUNK]

@iyn Does it work if you move the import after the variable declarations?

Edit: It might not work, considering this file declares variables without the !default flag...

[iyn]

@SEAPUNK No, it doesn't work even if I move the import, tried that already ;).

I guess this the problem may be with the missing !default flags, as you're saying. Maybe somebody else can confirm?

[llorca]

We talked about this earlier and decided against it for a few reasons, but we'd be happy to revisit. What do you think of this discussion?

[llorca]

Btw with the example above I can see why you'd need to override these variables too. I'll let others chime in

[dmackerman]

Personally, I'm not sure why colors arent overridable. I think that's the right call for the Palantir use case, but it's not detrimental to allow full color control if that's what a user needs. 2 cents.

[gregtillbrook]

Im also a fan of adding !default on vars, it fits well with my current use case. I want to tweak the hues of the blues/greens/reds etc in blueprint to match my sites pallet while still keeping them as blues/greens/reds etc.

I can see why you were reluctant to avoid users having code like $green = purple;. Maybe a better solution down the road is to abstract your colour vars so they're named by intent rather then explicit color?

e.g.

$red1: #a82a2a;
$red2: #c23030;

//use these colors throughout library - above colors are only for assignment here
$color-danger1: $red1 !default;
$color-danger2: $red2 !default;

Edit: created a small PR for re-adding !default to the colours incase that helps + you folks agree with discussion here #377

[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: https://github.com/palantir/blueprint/blob/6fcf038b87284318fc25481da92ce7f2166f8b4b/packages/core/package.json#L25.

anyway, we're going to remove the bourbon dependency completely in the near future https://github.com/palantir/blueprint/issues/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.