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

Create a minimal git repo which reproduces your issue, so we can take a look... — Legends
– Legends, Commented May 17, 2018 at 22:37
@Legends I edited my question adding a link to a minimal github repository. I included the whole node_modules directory, so simply running npm run build should be enough — Carlo
– Carlo, Commented May 22, 2018 at 13:04

Gautam Naik · Accepted Answer · 2018-05-17 05:13:04Z

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.

answered May 17, 2018 at 5:13

Gautam Naik

9,4643 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carlo Over a year ago

sorry, maybe I wasn't clear in my question: the plugin NoUiSlider is imported with ProvidePlugin, the nouislider.css file is imported inside a script.

Gautam Naik Over a year ago

@Carlo import css using the above method in one of ur scss files

Carlo Over a year ago

I just tried anyway your method and it doesn't work. With my current webpack configuration, importing the nouislider.css directly in the main.scss generates anyway two separate css

Legends · Accepted Answer · 2018-05-23 21:04:08Z

0

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.

edited May 23, 2018 at 21:04

answered May 22, 2018 at 21:18

Legends

22.9k17 gold badges102 silver badges133 bronze badges

6 Comments

Carlo Over a year ago

I need the optimization because on the real website I have many entry points an many libraries in node_modules. Is it really a problem putting the scss as an entry point? I have many entry points and I need the same css in all of them

Legends Over a year ago

You could create a one main.scss file and there import all css and scss files you want to be part of it and finally only import main.scss in your entry scripts. You can keep the optimization part but for this little test repo it's not needed.

Carlo Over a year ago

of course, but I wanted to keep the configuration as similar as possible to the actual one. Would it be an acceptable practice to create a fake style.js file simply to import the main.scss and the css and use it as an entry point?

Legends Over a year ago

AFAIK, it's not an entry-point shouldn't be used. Currently the webpack docs still point to wp v3. twitter.com/wSokra/status/969678282085060608

Carlo Over a year ago

the issue I have with these solutions is that it's not evident where the scss gets imported and I can't choose the generated filename. It's not a big deal, but it's weird that I end up having the css named as a script even when they are not related at all

|

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related