How use the mini-css-extract-plugin to combine imported css and css generated from scss in a single file?

Question

I'm using Webpack 4 and the mini-css-extract-plugin in a php application. I keep all the css styles I've written in scss files but, in some cases, when I import an external library, I import its css in the script where I use it. My end goal would be to have all the css styles in a single css file that I can manually include in a php view, but at the moment I get the scss in a file and the css from libraries in another.

My current webpack configuration is this:

module.exports = {
  devtool: 'source-map',
  entry: {
  style: './resources/assets/sass/style.scss',
  ...
},
 optimization: {
   splitChunks: {
     cacheGroups: {
       default: false,
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          //minChunks: 2,
        },
      },
    },
  },
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: { config: { path: 'postcss.config.js' } },
          },
          'sass-loader',
        ],
      },
plugins: [
new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    }), 
new webpack.ProvidePlugin({
     noUiSlider: 'nouislider',
   }),
]

The scss styles work correctly, but then in one script I have this:

import 'nouislider/distribute/nouislider.css';

Which is from a script included with ProvidePlugin and this css ends up in vendors.css file, while I would like it to be in style.css together with the rest.

What am I doing wrong?

Edit: As suggested, I created a github repository recreating the issue:

https://github.com/carlotrimarchi/webpack-test

Answer 1

Add @import '~nouislider/distribute/nouislider.css'; to one of ur scss files. No need to use ProvidePlugin for importing css.

The (~) symbol tells webpack to look into node_modules folder. You can use this method for any css/scss files from node_modules folder.

Answer 2

EDIT:

You want:

...and this css ends up in vendors.css file, while I would like it to be in style.css together with the rest.

Use Gautams answer. All this left, right confused me. Just ref all the style files in one scss file, then they will get bundled together. I still don't get why you do a separate import of nouislider in scripts.js...

---

First:

entry: {
  style: './resources/assets/sass/style.scss',

style.css is not an entry-point to your application, it is script.js as it is the only js file in your project, beside node_modules.

webpack.config.js

 entry: {
        // style: './resources/assets/scss/main.scss',
        common: './resources/assets/js/script.js',
    },

In wp4: plugins, vendor scripts, css files are not entry-points to your application! Don't add them under entry

What you need to do:

1.) Change the your entry-point as mentioned above

2.) Remove the optimization section in your webpack.config.js. You don't need it.

3.) Remove ProvidePlugin (not needed)

4.) Import the styles in your entry file:

scripts.js:

import "../scss/main.scss"
import 'nouislider/distribute/nouislider.css';

console.log('test')

The styles are rendered in the order you import them.

WP4 automatically creates optimized output bundles for your app. So for your little test repo and the adopted changes 1-4, you will get one js bundle and one css bundle.