SCSS mixins don't work

Hi! in the screenshot you can see different attempts at importing mixin from a file and one attempt of hardcoding it directly in the stylesheet. None of these work. I’m not commenting them out for presentation purposes, of course I’ve tried them one by one.

Webpack does not signal any mistakes, and compilation of attributes works, it just misses the mixin.

When I paste the style from the mixin directly into class selector, it works (obviously)

Here is my webpack config file

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    main: "./src/pages/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name][contenthash].js",
    clean: true,
    assetModuleFilename: "[name][ext]",
  mode: "development",
  devServer: {
    static: path.resolve(__dirname, "./dist"),
    open: true,
    compress: true,
    port: 8080,
  module: {
    rules: [
        test: /\.js$/,
        use: "babel-loader",
        exclude: "/node_modules/",
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
        test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
        type: "asset/resource",
        test: /\.css$/,
        use: [
            loader: "css-loader",
            options: {
              importLoaders: 1,
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.