MiniCssExtractorPlugin not generating CSS from SCSS

Question

I want to generate a file public/stylesheets/main.css from a file at styles/main.scss. It is my understanding that MiniCssExtractorPlugin can do this; however, with my current configuration, no CSS file is generated.

styles/main.css

@import '../node_modules/bootstrap/scss/bootstrap';

// TODO: Import only select components instead of all Boostrap
// TODO: Customize component styles
// TODO: Add additional styles

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    "javascripts/contacts/index": "./src/main/contacts/index.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "public"),
  },
  module: {
    rules: [
      // Babel
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      // CSS
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, "src"),
          path.resolve(__dirname, "node_modules/bootstrap/"),
        ],
        use: ["style-loader", "css-loader"],
      },
      // SCSS
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, "styles")],
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    // Transpile SCSS to CSS
    new MiniCssExtractPlugin({
      filename: "stylesheets/main.css",
    }),
    // Environent variable replacement in client scripts
    new webpack.EnvironmentPlugin({
      NODE_ENV: "production",
      APP_URL: "http://localhost:3000",
      DEBUG: false,
    }),
  ],
};

I am new to Webpack, so I would appreciate any details about why this configuration doesn't work or misconceptions I may have.

MiniCssExtractorPlugin not generating CSS from SCSS

0 Answers0