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:
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.
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
...
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.