Webpacker: Importing styles from node_modules/@blueprintjs is showing error "Error: Failed to find '~@blueprintjs/core/lib/css/blueprint'"

[pityara]

Hello,

I tried to load styles from blueprintjs library and follow this instructions.

In file app/javascript/packs/application.js i have this code:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import '../src/index.css';
import { App } from '../src/App';
import store from '../src/stores/store';
...

And in file app/javascript/src/index.css i have this:

@import '~@blueprintjs/core/lib/css/blueprint';
@import '~@blueprintjs/icons/lib/css/blueprint-icons';

But when I run rails webpacker:compile I get the following error message:

ERROR in ./app/javascript/src/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Failed to find '~@blueprintjs/core/lib/css/blueprint'
  in [
    /Users/EgorNikitin/todayilearned/app/javascript/src
  ]

Any help would be helpful to me!

[gauravtiwari]

What happens if you remove ~ from import?

@import '@blueprintjs/core/lib/css/blueprint';
@import '@blueprintjs/icons/lib/css/blueprint-icons';

[pityara]

@gauravtiwari Thanks, it help for styles.
There are some problems with icons file, but if i put import of icons in application.js file this works fine.
Now I cant understand why the sign "~" is not needed in stylesheets file.

[gauravtiwari]

~ is needed in sass imports and not in css - https://github.com/webpack-contrib/sass-loader#imports and https://github.com/postcss/postcss-import#usage (used with css files)

In regards to icons, you might need https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader

[superslau]

Just to make it clear regarding the icons:

Instead of doing this in app/javascript/src/index.css:

@import '@blueprintjs/core/lib/css/blueprint';
@import '@blueprintjs/icons/lib/css/blueprint-icons';

It's now:

@import '@blueprintjs/icons/lib/css/blueprint-icons';

And app/javascript/packs/application.js looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import '../src/index.css';

// import icons directly into JS pack file
import '@blueprintjs/icons/lib/css/blueprint-icons.css';


import { App } from '../src/App';
import store from '../src/stores/store';

No need to faff with resolve-url-loader

[gauravtiwari]

Great thanks @superslau