Mini-css-extract-plugin: CSS from node_modules is not include in the generated css

[AvraamMavridis]

I am using the module with Webpack 4.1.0
We have a ui-lib that has some components along with there scss files.

e.g.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TanForm from 'ui-lib/src/components/TanForm';

...
render() {
   return (
        <TanForm />
    )
}

I am using the plugin like

    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'obsstyles.css',
    }),

   ...

  module: {
    rules: loaders.concat([
      {
        test: [/\.scss$/, /\.css$/],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 'sass-loader',
        ],
        include: [
          /src/,
          /ui-lib/,
        ],
      },
    ]),
  },

The generated css does not contain the classes from the ui-lib components
Not sure if my setup is wrong or there is a bug. I see many undefined classes.

[sandersky]

I could be wrong but wouldn't your include config need to use node_modules/ui-lib/ instead of /ui-lib/? Also is any of your code actually including the ui-lib CSS via a CSS @import statement or a JS require/import?

[sokra]

Also is any of your code actually including the ui-lib CSS via a CSS @import statement or a JS require/import?

[AvraamMavridis]

@sandersky @sokra

The import is only through JS.

My component are importing components from a shared ui library, there, the components are importing the styles like

import React, { Component } from 'react'
import styles from './styles.scss

[AvraamMavridis]

I could be wrong but wouldn't your include config need to use node_modules/ui-lib/ instead of /ui-lib/?

I am using an alias on webpack to map node_modules/ui-lib/ to ui-lib, so the components are imported correctly but without the proper styling.

[michael-ciniawsky]

@AvraamMavridis Could you please post an @import example and the relevant part of your webpack.config.js ? resolve.alias isn't supported by css-loader for @import's btw :). For node_modules/lib => ~lib as a shorthand is supported, but that's it

[lfernandoavalos]

Is there any update on this? Or I might just be doing things wrong. I'm currently building a component ui library and generating build files with .js and .css. Is there a way I can load the css by only importing the component without requiring me to load both the component and css?

// What I'm currently doing - importing the generated css file from webpack
import 'path/to/dist/Bagels/index.css';
import Bagels from 'path/to/dist/Bagels';

// What I wish - Automagically import css by just importing component
import Bagels from 'path/to/dist/Bagels';