Blueprint: Allow build of scss file from blueprintjs package file(s)

[avkonst]

Environment

• __Package version(s)__: 3.6.1 +
• __Browser and OS versions__: any

Feature request

This is the continuation for https://github.com/palantir/blueprint/issues/2976#issuecomment-425479663

I would like to node-sass build blueprintjs.scss file from the blueprintjs/core package in my project. This would allow me to restyle and override things the way I would like to. Build of the scss file depends on sass-inline-svg.js script which is also included in the package and it is good. But this script requires few SVG icons as .svg files placed in /resources/icons which are missed in the distributed package. So the build of the scss file is failed without these .svg files. Workaround is to rewrite the script to point out to manually / one-off downloaded required .svg files. This is not future proof as the upgrade to newer blueprintjs versions will require re-downloading of the required (and potentially new) svg files.

Proposed feature: track what svg files are referred in the scss file and include them to the package together with blueprintjs.scss and sass-inline-svg.js supporting relatively correct paths.

[avkonst]

The issue is not relevant anymore after I migrated to react-scripts 2.1.1 from react-scripts-ts. It seems importing blueprint.scss in react app built with react-scripts is working properly.

[danilofes]

Although this issue is closed I didn't manage to get blueprintjs.scss to work. When I import the scss, the build does not fail, but the breadcrumbs' icons don't show (similarly to #3059).

Specifically, by inspecting the styles I noticed that this is what I get when importing the scss

.bp3-breadcrumbs > li::after {
  background: svg-icon("16px/chevron-right.svg", (path: (fill: #5c7080)));
}

In contrast, this is what I get when importing the css

.bp3-breadcrumbs > li::after {
  background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1…8-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/%3e%3c/svg%3e);
}

I'm simply importing the scss like this:

@import '~@blueprintjs/core/src/blueprint.scss'

Am I doing something wrong?

P.S.: I'm using react-scripts 2.1.1 (from official create-react-app)

[avkonst]

You are right. I was wrong reporting the issue is solved. I missed that the breadcrumbs still not working.

[avkonst]

Here is the workaround available: https://github.com/palantir/blueprint/issues/2976#issuecomment-479231949