Mdb-ui-kit: custom theming does not work

Created on 21 Feb 2020  Â·  15Comments  Â·  Source: mdbootstrap/mdb-ui-kit 
🚨  /home/flip111/project/custom_bootstrap.scss:56:9: Can't find stylesheet to import.
   â•·
56 │ @import "~bootstrap/scss/functions"; // from bootstrap node_module
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap-material-design/scss/_variables.scss 56:9                @import
  node_modules/bootstrap-material-design/scss/_core.scss 2:9                      @import
  node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss 3:9  @import
  custom_bootstrap.scss 5:9                                                       root stylesheet

Also it seems bootstrap is required as a dependency but not listed as dependency. I installed bootstrap myself through npm, but that didn't solve anything

picture flip111
👍2

All 15 comments

After commenting this line and the next, the following error

custom_bootstrap.scss:132:3: $color: theme-color(primary) is not a color.
    â•·
132 │   lighten($bmd-switch-handle-checked-bg, 28%),
    │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap-material-design/scss/_variables.scss 132:3               @import
  node_modules/bootstrap-material-design/scss/_core.scss 2:9                      @import
  node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss 3:9  @import
  custom_bootstrap.scss 5:9                                                       root stylesheet
flip111 picture flip111 on 21 Feb 2020

After i imported bootstrap (which the documentation does not mention i should do). And also keep in place the commenting of

// @import "~bootstrap/scss/functions"; // from bootstrap node_module
// @import "~bootstrap/scss/variables"; // from bootstrap node_module

i run into issue https://github.com/FezVrasta/bootstrap-material-design/issues/1300

flip111 picture flip111 on 21 Feb 2020

I can confirm that the node module "bootstrap" is required hence removing imports to avoid errors is not an option. Please insert the lines again and post what is the actual error.

ViRuSTriNiTy picture ViRuSTriNiTy on 25 Feb 2020

The actual error is in the first post. This stays the same with or without bootstrap import. You can download bootstrap from npm yourself and notice that there are no functions and variables folders in the scss folder.

flip111 picture flip111 on 26 Feb 2020

bootstrap is required for this library to work, however this brings up another concern, how come bootstrap is marked as a dev-dependency, rather than just being added with the library. After installing i recieve the same error message:

"File to import not found or unreadable: ~bootstrap/scss/functions."

on attempting to import bootstrap-material-design/scss/bootstrap-material-design

jakebeatty picture jakebeatty on 26 Mar 2020

@flip111 @jakebeatty It's unclear to me what the underlying issue is on your side.

Here is my configuration which allows theming without any issues. Perhaps this can serve as a template to fix your configuration.

  1. Set npm dependencies

    package.json

    {
  ...
  "dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-material-design": "^4.1.2",
  }
}

  2. Create SASS file for bootstrap material theming

    bootstrap-material.scss

    // set theme primary color to red 
$theme-colors: ( "primary" : #ff0000 );

@import "node_modules/bootstrap-material-design/scss/bootstrap-material-design";

  3. Create SASS file for site specific styles

    site.scss

    @import "bootstrap-material";

// place your site specific styles here

  4. Compile SASS to CSS via gulp

    gulpfile.js

    const gulp = require('gulp');
const sass = require('gulp-sass');
// tilde importer as bootstrap files use ~ here and there and it might
// be possible (at least in my case) that the sass compiler does not understand it by default
const tildeImporter = require('node-sass-tilde-importer'); 

gulp.task('build-css', function () {
    return gulp.src([
        'site.scss'
    ])
    .pipe(sass({
        importer: tildeImporter
    }).on('error', sass.logError))
    .pipe(gulp.dest('css'))
});

  5. Include compiled CSS in HTML

    index.html or any other html file

    <link rel="stylesheet" href="css/site.css" />

Hope this helps solve the issue.

ViRuSTriNiTy picture ViRuSTriNiTy on 26 Mar 2020

With some commands i had to run your method works @ViRuSTriNiTy 

npm install --global gulp-cli
npm install --save-dev gulp
npm install --save-dev gulp-sass
npm install --save-dev node-sass-tilde-importer

However i'm using parcel instead of gulp. I think parcel doesn't need configuration by default, instead reads html and js files and tries to figure out a build plan from there. Loading of css is done here i think

import 'bootstrap-material-design/dist/css/bootstrap-material-design.css';
// import './custom_bootstrap.scss';
import 'font-awesome/css/font-awesome.css';
import 'material-design-icons/iconfont/material-icons.css';
import './index.css';

Commenting out the custom_bootstrap.scss file because it doesn't work yet. Then the custom_bootstrap.scss looks like

// $theme-colors: (
//   "primary": #0074d9
// );

@import "node_modules/bootstrap/scss/bootstrap.scss";
@import "node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss";
flip111 picture flip111 on 26 Mar 2020

@flip111 Ok, then your issue is a special case because parcel does not seem to support SASS files by default, that's why it complains when using .scss files with the import() statement. I cannot help you here as i'm not using parcel but it surely looks interesting, i might give it a try in the future.

Some sources to get started with SCSS and parcel:

https://github.com/parcel-bundler/parcel/issues/39
https://parceljs.org/scss.html

ViRuSTriNiTy picture ViRuSTriNiTy on 26 Mar 2020

Hi @ViRuSTriNiTy great advise. This comment fixed some things for me https://github.com/parcel-bundler/parcel/issues/39#issuecomment-443061650 i also opened an issue with the parcel documentation that the .sassrc file should be there see https://github.com/parcel-bundler/website/pull/576

The situation up until now:

  1. Can't find stylesheet to import. is now resolved.
  2. $color: theme-color(primary) is not a color. was already resolved by requiring bootstrap. But would be nice if bootstrap-material-design lists bootstrap as a regular dependency, not just a devDepenency and then let things error.
  3. https://github.com/FezVrasta/bootstrap-material-design/issues/1300 remains an issue.

I will leave this issue open for the dependency of bootstrap in point 2.

Also i will wait to see if all issues together are resolved at some point and the entire sass compilation works.

@ViRuSTriNiTy do you need some help to send in the PR you wanted to do in https://github.com/FezVrasta/bootstrap-material-design/issues/1400 ? Looks like repository owner is waiting for you. I couldn't find a PR https://github.com/FezVrasta/bootstrap-material-design/pulls?q=is%3Apr+author%3AViRuSTriNiTy+

flip111 picture flip111 on 26 Mar 2020
👍1

@flip111 Didn't find the time to do this yet. Do you have any spare time? If this is the case then please provide a PR.

ViRuSTriNiTy picture ViRuSTriNiTy on 26 Mar 2020

About PR see comment https://github.com/FezVrasta/bootstrap-material-design/issues/1400#issuecomment-604646579

Fixing bootstrap-material-design to a newer commit doesn't work (see below)

» npm install --save git://github.com/FezVrasta/bootstrap-material-design.git#9db13a3a7fcb3b09fa694a292adf99195beda129
npm ERR! prepareGitDep 1> 
npm ERR! prepareGitDep > [email protected] install /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/node-sass
npm ERR! prepareGitDep > node scripts/install.js
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Cached binary found at /home/flip101/.npm/node-sass/4.13.1/linux-x64-72_binding.node
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > [email protected] postinstall /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/core-js
npm ERR! prepareGitDep > node -e "try{require('./postinstall')}catch(e){}"
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
npm ERR! prepareGitDep 
npm ERR! prepareGitDep The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
npm ERR! prepareGitDep > https://opencollective.com/core-js 
npm ERR! prepareGitDep > https://www.patreon.com/zloirock 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > [email protected] postinstall /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/node-sass
npm ERR! prepareGitDep > node scripts/build.js
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Binary found at /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/node-sass/vendor/linux-x64-72/binding.node
npm ERR! prepareGitDep Testing binary
npm ERR! prepareGitDep Binary is fine
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > [email protected] prepare /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c
npm ERR! prepareGitDep > npm run build
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > [email protected] build /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c
npm ERR! prepareGitDep > npm run build:js && npm run build:js-min && npm run build:css && npm run build:css-min
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > [email protected] build:js /home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c
npm ERR! prepareGitDep > rollup js/index.js --output.file=dist/js/bootstrap-material-design.js -m --config=rollup.config.js
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm ERR! prepareGitDep npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! prepareGitDep npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep js/index.js → dist/js/bootstrap-material-design.js...
npm ERR! prepareGitDep (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
npm ERR! prepareGitDep js/baseInput.js: (2:9)
npm ERR! prepareGitDep [!] Error: 'createSuper' is not exported by rollupPluginBabelHelpers.js, imported by js/baseInput.js
npm ERR! prepareGitDep https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
npm ERR! prepareGitDep js/baseInput.js (2:9)
npm ERR! prepareGitDep 1: import Base from "./base";
npm ERR! prepareGitDep 2: import Util from "./util";
npm ERR! prepareGitDep             ^
npm ERR! prepareGitDep 3: 
npm ERR! prepareGitDep 4: const BaseInput = ($ => {
npm ERR! prepareGitDep Error: 'createSuper' is not exported by rollupPluginBabelHelpers.js, imported by js/baseInput.js
npm ERR! prepareGitDep     at error (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:5400:30)
npm ERR! prepareGitDep     at Module.error (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:9824:16)
npm ERR! prepareGitDep     at handleMissingExport (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:9725:28)
npm ERR! prepareGitDep     at Module.traceVariable (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:10163:24)
npm ERR! prepareGitDep     at ModuleScope.findVariable (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:8770:39)
npm ERR! prepareGitDep     at FunctionScope.findVariable (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:3065:38)
npm ERR! prepareGitDep     at ChildScope.findVariable (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:3065:38)
npm ERR! prepareGitDep     at FunctionScope.findVariable (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:3065:38)
npm ERR! prepareGitDep     at ChildScope.findVariable (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:3065:38)
npm ERR! prepareGitDep     at Identifier$1.bind (/home/flip101/.npm/_cacache/tmp/git-clone-d7e0d30c/node_modules/rollup/dist/shared/node-entry.js:4403:40)
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] build:js: `rollup js/index.js --output.file=dist/js/bootstrap-material-design.js -m --config=rollup.config.js`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] build:js script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /home/flip101/.npm/_logs/2020-03-26T19_48_33_439Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] build: `npm run build:js && npm run build:js-min && npm run build:css && npm run build:css-min`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] build script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /home/flip101/.npm/_logs/2020-03-26T19_48_33_451Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] prepare: `npm run build`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /home/flip101/.npm/_logs/2020-03-26T19_48_33_479Z-debug.log
npm ERR! prepareGitDep 
npm ERR! premature close
flip111 picture flip111 on 26 Mar 2020

@flip111 Why are you installing an npm module from a git:// source? Is this even technically possible? Never seen such a thing.

ViRuSTriNiTy picture ViRuSTriNiTy on 26 Mar 2020

I had to look it up as well. But i was trying this because there has not been a release yet where this problem has been fixed.

At the moment i'm also have work on database stuff, but i'm excited to see a custom color theme, so i figured i would try it directly from the latest commit.

flip111 picture flip111 on 26 Mar 2020

I think all issues are fixed now (i haven't tested my setup yet though). I will reopen if i encounter the same issue again.

flip111 picture flip111 on 27 May 2020
🎉1

I think all issues are fixed now (i haven't tested my setup yet though). I will reopen if i encounter the same issue again.

Does the "all issues are fixed now" also include the issue #1400?

:edit:

Yes, i can confirm that updating npm package bootstrap-material-design to 4.1.3 solves #1400

ViRuSTriNiTy picture ViRuSTriNiTy on 27 May 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajavijayavendan picture rajavijayavendan  Â·  7Comments
nekkon picture nekkon  Â·  4Comments
thangchung picture thangchung  Â·  3Comments
HectorLS picture HectorLS  Â·  6Comments
Elisa1202 picture Elisa1202  Â·  5Comments