import css file from node_modules?

[hyalkaf]

I was wondering what changes should I make to import css files from node_modules into my components? boilerplate only imports css files if they have .global.css or if they are in the same folder as js files.

[amilajack]

Use sass instead. You can use my repo as an example:

https://github.com/amilajack/popcorn-time-desktop

Check out this webpack file

[csprance]

How does using sass solve the problem of importing css files? I have a similar issue in which i need to use ag-grid so i need to do a

import 'ag-grid/dist/styles/theme-fresh.css';
import 'ag-grid/dist/styles/ag-grid.css';

How would using sass solve that issue?

[hyalkaf]

I solved it by adding this to my webpack.config.developement.js and webpack.config.production:

{
        test: /\.css$/,
        loader: "style-loader!css-loader"
}

This is probably not the optimal solution since this goes through all your CSS files under node_modules. For the specific files you mentioned, you might be able to do something like this:

{
        test: /ag-grid[\\\/]dist[\\\/]styles\.css$/,
        loader: "style-loader!css-loader"
}

[amilajack]

Makes sense. Can this be closed?

[hyalkaf]

Yeah sure. Unless @csprance have more questions.

[csprance]

Yep feel free to close it. I didn't end up using any of the solutions here because they didn't seem to work.
My solution was to use the following code in app.global.css

@import '../node_modules/ag-grid/dist/styles/ag-grid.css';
@import '../node_modules/ag-grid/dist/styles/theme-dark.css';

this way it pulled only the css i needed from the specific themes needed

[devsli]

Other possible solution is to use .module.css to specify local module and treat all other files as global.

Source: webpack-contrib/css-loader#308