Webpack does not create styles.css from styles.scss

Question

I am new in webpack. Please help me. What I have done wrong I do not know. It does not show any error!!! This is my webpack.config.js file. It creates bundle.js, but it does not create styles.css from styles.scss. Expecting webpack will create style.css in static/css/. The folder structure is -

 -package.json
    -webpack.config.js
    -static/
        css/
        js/
            src/main.js
        sass/style.scss

---

    module.exports = {
    entry: {
        app: path.resolve(__dirname, './static/js/src/main.js'),

    },
    output: {
        path: path.resolve(__dirname, './static/js/'),
        filename: 'bundle.js'
    },
    module: {
        rules: [

            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'es2015', 'react'],
                        plugins: [require('babel-plugin-transform-object-rest-spread')]
                    }
                }
            },


            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: ["css-loader", "sass-loader"],
                    fallback: "style-loader",
                    publicPath: path.resolve(__dirname, '/static/css')

                })
            }

        ]
    },

    plugins: [


        new ExtractTextPlugin({
            filename: 'styles.css',
            disable: false,
            allChunks: true
        }),

        //reduce react size
        new webpack.DefinePlugin({ 
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),

        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: false,
                warnings: false
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin()

    ]
};

---

These are my node dependencies-

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },

Thanks in advance.

Answer 1

In general, while webpack loaders does resource specific tasks, its the source code that needs to define the dependency. In your source code wherever you need that SCSS styles, you need to import that SCSS file. It may sound strange to hear for the first time but thats how webpack works.

That said, configuration looks good to me.

Webpack should process the SCSS dependencies in the dependency graph if all is well.

Does the output show any signs it processed the SCSS source files ?

If the output css file is not created then the likely missing piece is missing dependency declaration in source code i.e require("./scss-file-here") or import "./scss-file-here"

From webpack Guide here

This enables you to import './style.css' into the file that depends on that styling.