Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mini-css-extract-plugin + sass-loader + splitChunks #49

Closed
Loykos opened this issue Mar 21, 2018 · 9 comments

Comments

@Loykos
Copy link

@Loykos Loykos commented Mar 21, 2018

I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
            }
        }
    }
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "dist/[name].css",
    }),
]

And the following sass files:


// a.scss
@import 'global.scss';
@import 'vendor.css';
[...] 

// b.scss
@import 'global.scss';
@import 'vendor.css';
[...]

When I run webpack vendor.css is inserted in in commons.css bundle while global.scss not.

In general every import of .css file get processed by splitChunks option (only if extension .css is specified in the name) while .scss files not.

I have a project with multiple sass entry point and many @import of sass component and I'd like to create a common bundle with shared sass modules.

The chunk of js files works properly.

@okamiconcept

This comment has been minimized.

Copy link

@okamiconcept okamiconcept commented Mar 22, 2018

I have the same problem, the scss imports are not chunked (or bad), it seems it's a missing feature from sass-loader which export all scss in one module.

See: webpack-contrib/sass-loader#455

The only solution for the moment is to have only one entry for scss, it results on one big css.

@Loykos

This comment has been minimized.

Copy link
Author

@Loykos Loykos commented Mar 22, 2018

Just to clarify, with the above configuration i get:
a.css => A css/scss bundle
b.css => B css/scss bundle
common.css => common css only and not common scss import.

@okamiconcept do you mean I have to create manually a common.scss as entry file?

@okamiconcept

This comment has been minimized.

Copy link

@okamiconcept okamiconcept commented Mar 22, 2018

@Loykos Yes If you want to create a common css, you have to build it yourself, i hope another person have a better solution to that! :)

@Jessidhia

This comment has been minimized.

Copy link
Contributor

@Jessidhia Jessidhia commented Mar 27, 2018

This is a problem with, I believe, all compile-to-css languages unless you take particular care to not use @import or use it in a way that can be not converted by the compiler itself.

Basically, they work like a C preprocessor #include, and will just inline the source code of the @import. To webpack, you're really only importing a single .css file, and not a .css file that imports other .css files.

@ZSkycat

This comment has been minimized.

Copy link

@ZSkycat ZSkycat commented Jun 25, 2018

I think of a solution.
Change the entry file scss to js file.

@KytoSai

This comment has been minimized.

Copy link

@KytoSai KytoSai commented Jun 27, 2018

I try put import a.scss to a.js. It not work...! :(

@ZSkycat

This comment has been minimized.

Copy link

@ZSkycat ZSkycat commented Jun 27, 2018

@KytoSai
you need

            {
                test: /\.scss$/,
                use: [
                    'style-loader', // or MiniCssExtractPlugin.loader
                    { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } },
                    { loader: 'sass-loader', options: { sourceMap: true } },
                ],
            },

then you can use like

// style/index.js
import '../base.scss';
import './layout.scss';
import './nav-component.scss';

import './component/v-base-nav.scss';
import './component/v-nav-dropdown.scss';
import './component/v-realtime-nav.scss';
@Loykos

This comment has been minimized.

Copy link
Author

@Loykos Loykos commented Jul 5, 2018

Yes, I moved style import inside js entry files and it's working

@michael-ciniawsky

This comment has been minimized.

Copy link
Member

@michael-ciniawsky michael-ciniawsky commented Aug 24, 2018

webpack.config.js

entry: {
   a: ['./js/a.js',  => './scss/a.scss' <=],
   b: ['./js/b.js',  => './scss/b.scss' <=]
},

CSS Entrypoints are not officially supported (yet), it might look like it works but that's not the case and additionally one will get a useless JS file per CSS entrypoint containing only the webpack runtime. Don't use CSS Files as entrypoints, import into the JS entry intead

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.