-
-
Notifications
You must be signed in to change notification settings - Fork 390
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
Comments
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. |
Just to clarify, with the above configuration i get: @okamiconcept do you mean I have to create manually a |
@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! :) |
This is a problem with, I believe, all compile-to-css languages unless you take particular care to not use Basically, they work like a C preprocessor |
I think of a solution. |
I try put import a.scss to a.js. It not work...! :( |
@kytosai {
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'; |
Yes, I moved style import inside js entry files and it's working |
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 |
I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:
And the following sass files:
When I run webpack
vendor.css
is inserted in incommons.css
bundle whileglobal.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.
The text was updated successfully, but these errors were encountered: