Webpack removes css from .jsx files?

Question

I have webpack file that looks like this (note - for now - I need to create both minified and not minified versions of assets - so this is not a mistake):

const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const readSass = new ExtractTextPlugin({
    filename: "foo/bar/style.min.css"
});

    config = {
        entry: {
            "main": './main.js',
            "main.min": './main.js',
            "style.min": './style.scss'
        },
        watch: true,
        devtool: "source-map",
        output: {
            path: path.resolve(__dirname, '/dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/i,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: {
                        presets: ['es2015', 'react'],
                        minified: true
                    }
                },
                {
                    test: /\.scss|css$/,
                    use: readSass.extract({
                        use: [{
                            loader: "css-loader", options: { minimize: true }
                        }, {
                            loader: "sass-loader"
                        }]
                    })
                }
            ],
        },
        plugins: [
            readSass,
            new UglifyJsPlugin({
                include: /\.min\.js$/
            })
        ],
    }

    module.exports = config;

Everything works as expected, but there's one thing that bugs me.

In a few of my .jsx files I have CSS modules being loaded from different third-party components, stuff like:

import 'react-plugin/react-plugin.css';

Of course my compiled js and css files do not contain these styles. They're lost on the way. All the css from style.scss are there, all the js from main.js and jsx included within it are there, but theses styles are not.

What am I doing wrong?

Answer 1

that is simply because you are using extract-text-webpack-plugin module. if you want to keep your sass in your bundle then modify your webpack config into this:

const path = require('path');
const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


config = {
    entry: {
        "main": './main.js',
        "main.min": './main.js'
    },
    watch: true,
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/i,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['es2015', 'react'],
                    minified: true
                }
            },
            {
                test: /\.scss|css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ],
    },
    plugins: [
        readSass,
        new UglifyJsPlugin({
            include: /\.min\.js$/
        })
    ],
}

module.exports = config;

and instal sass-loader and style-loader by this command: npm install -D sass-loader style-loader

EDIT: I forgot to tell you, you have to include your css or sass before your js entry point like this

require('path/to/your/main.scss')

ReactDOM.render(<App />, document.getElementById('root'))

so that it is bundled together AND you don't have to include your css in the webpack config entry point anymore.