Skip to content

[Bug]: Source component styling files missing in distributed package #655

Description

@gselderslaghs

Before submitting...

Context

When building a project with materializecss/materialize as a dependency, styling configuration sources and component sources are missing

This results in a backward compatibility bug

Current Behavior

Requiring materializecss/materialize as dependency and building from source in a specific workflow (e.g. rollup, webpack, ...) results in a chain of forward references not found

Expected behavior

Since component sources are included in distributed package, css forward should not result in missing packages or forward statements should be refactored to desired output

Possible Solutions or Causes

As seen in materialize.scss

@forward "../node_modules/normalize.css/normalize.css";
@forward "./tokens.module.css";
@forward "./theme.module.css";
@forward "./typography.module.css";
@forward "./colors.module.css";
@forward "./typography";
@forward "./mixins.module";

@forward "./transitions.css";
@forward "./pulse.css";

@forward "../components/buttons/buttons";
@forward "../components/lists/collection";
@forward "../components/collapsible/collapsible"; // custom
@forward "../components/badges/badges";
@forward "../components/cards/cards";
@forward "../components/snackbar/toast";
@forward "../components/tabs/tabs";
@forward "../components/tooltips/tooltip";
@forward "../components/dropdown/dropdown";
@forward "../components/dialog/modal";
@forward "../components/dialog/materialbox"; // custom
@forward "../components/chips/chips";
@forward "../components/navigation-bar/navbar";
@forward "../components/navigation-drawer/sidenav";
@forward "../components/progress-indicators/preloader";
@forward "../components/carousel/slider";
@forward "../components/carousel/carousel";
@forward "../components/datepicker/datepicker";
@forward "../components/timepicker/timepicker";
@forward "../components/breadcrumb/breadcrumb"; // custom
@forward "../components/pagination/pagination"; //custom
@forward '../components/radio-button/radio-buttons';
@forward '../components/checkbox/checkboxes';
@forward '../components/switch/switches';
@forward '../components/sliders/range';
@forward '../components/text-fields/input-fields';
@forward '../components/text-fields/select';
@forward '../components/text-fields/file-input';

Missing in distributed package
https://www.npmjs.com/package/@materializecss/materialize/v/2.3.0?activeTab=code

Steps to reproduce

  1. require materializecss/materialize by npm e.g. npm init + npm install @materializecss/materialize@2.3.0
  2. implement workflow to build from source e.g. by providing node_modules/@materializecss/materialize/sass/materialize.scss as input file, rollup example for standalone materialize sass compilation:
{
    input: 'node_modules/@materializecss/materialize/sass/materialize.scss',
    output: [{file: 'dist/materialize.css'}], // overwritten
    plugins: [
        scss({
            fileName: 'materialize.css'
        })
    ],
}

Your Environment

  • Version used: v2.3.0

Activity

  1. wuda-io commented on Mar 19, 2026

    @wuda-io
    Member

    Have you tried to use the newer versions? I have to look into it. I remember there was a fix recently.

    I will take a look soon and also make hotfix because of the security issues and maybe add a new release due to some changes regarding component code generation (in dev now).

  2. wuda-io commented on Sep 23, 2026

    @wuda-io
    Member

    Hello, thanks for your issue, the plan is to use CSS only in future. Then we can increase delivery speed and also can seperate components better. The goal is to remove any intermediate transpiling steps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions