Basically i have my css and scss imported from index.js.
Everything is ok in dev. But in production build the css from toastify from node_modules that is imported like this import 'react-toastify/dist/ReactToastify.css'
is not appears in styles.css so its not added to main css bundle.
here is webpack config:
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');
module.exports = {
mode: "production",
context: __dirname,
entry: {
'app': './src/index.js',
},
output: {
filename: "js/[name].js",
chunkFilename: 'js/[name].bundle.js',
path: __dirname + "/public",
publicPath: '/',
},
optimization: {
noEmitOnErrors: true,
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
output: {
comments: false,
ascii_only: true
},
compress: {
warnings: false
}
}
})
],
splitChunks: {
chunks: "all",
cacheGroups: {
vendor: {
test: /node_modules/,
name: "vendor",
chunks: "initial",
enforce: true
}
}
}
},
devServer: {
inline: true,
historyApiFallback: {
index: '/'
},
},
devtool: "source-map",
plugins: [
new webpack.DefinePlugin(injectConfig),
new MiniCssExtractPlugin({
filename: './css/styles.css',
chunkFilename: '[id].[hash].css',
allChunks: true,
})
]
,
resolveLoader: {
modules: ['node_modules'],
extensions: ['.js', '.json']
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ["transform-decorators-legacy", "syntax-dynamic-import"],
presets: [ 'react', [ 'es2015' ], 'stage-0', ]
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'file-loader?name=../fonts/[name].[ext]'
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader' ,
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
}
},
]
},
]
}
}
i noticed if i remove the splitChunks part- the toastify css appears in styles.css bundle, but with this part it does not.
Sorry for bad indent.
mini-css-extract-plugin": "^0.4.1"
"webpack": "^4.16.2"
node: 8.11.3
Not related to mini-css-extract-plugin, looks you have invalid configuration, but i can't read what you post because it is ugly
Most helpful comment
Not related to
mini-css-extract-plugin, looks you have invalid configuration, but i can't read what you post because it is ugly