Webpack SASS and Tailwind not generating CSS file

Question

I want to add both sass and tailwind to my project but for some reason I don't know, there is no CSS file been generated when I run webpack or maybe it does but I can't find it...

here is my webpack.config.js:

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

 module.exports = {
   entry: {
     index: './src/index.js',
     page2: './src/page2.js'
 },
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
 },

 module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },                    
                {
                    loader: 'postcss-loader'                        
                },                    
                {
                    loader: 'sass-loader',
                    options: {                            
                        plugins: () => [autoprefixer()]
                    }
                } 
            ]
        },
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS content and minimize
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },
                { loader: 'postcss-loader' }
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
         filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: './dist/page2.html',
        inject: 'body',
        chunks: ['page2'],
        filename: 'page2.html'
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
        chunkFilename: "[id].[contenthash].css"
       })
   ],
   devServer: {
       watchContentBase: true,
       contentBase: path.resolve(__dirname, 'dist'),
       open: true
   }
};

My postcss.config.js:

module.exports = {
   plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 1 }),
    require('autoprefixer')
  ]
};

and my tailwind.config.js

module.exports = {
  purge: [  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

my index.js:

import "./styles.scss";

my styles.scss:

@import "~tailwindcss/base.css";
@import "~tailwindcss/components.css";
@import "~tailwindcss/utilities.css";

.my-class {
   @apply font-bold;
}

This does not work...Can someone maybe help me out?

Answer 1

I was having the same issue as you and ran into this answer and initially wasn't sure why you continued to encounter this issue when you already had importLoaders: 1 added to your css-loader config.

However, according to the documentation for css-loader's importLoader option, you need to change the 1 to a 2. Right now, only the postcss-loader is being imported when you also want sass-loader to be imported as well.

Here's how I would change your webpack.config.js to resolve this issue:

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

 module.exports = {
   entry: {
     index: './src/index.js',
     page2: './src/page2.js'
 },
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
 },

 module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS or SCSS content and minimize
            test: /\.[s]?css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 2 } },
                { loader: 'postcss-loader' },
                { loader: 'sass-loader' },
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
         filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: './dist/page2.html',
        inject: 'body',
        chunks: ['page2'],
        filename: 'page2.html'
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
        chunkFilename: "[id].[contenthash].css"
       })
   ],
   devServer: {
       watchContentBase: true,
       contentBase: path.resolve(__dirname, 'dist'),
       open: true
   }
};

You'll notice I also refactored your css rule into the scss rule to eliminate a bit of redundancy. That way, you only have to declare all the styling loaders only once.