Topic: Is there a complete tutorial on how to compile modified css from SASS?

sdpollack premium asked 9 months ago


I'm struggling to figure out how to recompile the css from sass. I need to make a few global changes (default colors, fonts, etc.) There are several pages that describes steps in the process, but I would really appreciate a tutorial that goes step by step from the beginning to end on how to apply some global changes to the Pro package and recompile the css. I've watched the MDB Live: SASS crash course for beginners tutorial but that was not helpful in understanding how to apply this to MDB using either the MDB 5 Webpack Starter or the mdb-ui-kit-pro-essential packages.

I find the instructions on the following pages to be at best confusing and at worst contradictory: https://mdbootstrap.com/docs/standard/pro/installation/ https://github.com/mdbootstrap/mdb-webpack-starter https://mdbootstrap.com/docs/standard/content-styles/theme/

BTW - I use npm.


KieranFoot priority answered 9 months ago


There is no need to use webpack as you can simply invoke the SASS compiler with a gulp script.

It takes any .scss script from the ./Styles directory and also builds the two MDB css files.

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const rename = require("gulp-rename");
const cleanCSS = require("gulp-clean-css");
const sourcemaps = require("gulp-sourcemaps");

const scssSources = [
    "./Styles/*.scss",
    "./wwwroot/mdb/src/mdb/scss/mdb.pro.scss",
    "./wwwroot/mdb/src/mdb/scss/mdb.dark.scss",
    "./wwwroot/mdb/src/mdb/scss/bootstrap/bootstrap.scss"
]

const plain_css = (cb) =>
{
    gulp.src(scssSources)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./wwwroot/css/"));
    cb();
}

const min_css = (cb) => 
{
    gulp.src(scssSources)
        .pipe(rename({ extname: ".min.css" }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cleanCSS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./wwwroot/css/"));
    cb();
}

gulp.task("sass", gulp.parallel(plain_css, min_css));

gulp.task("default", function() {
   return gulp.watch("./Styles/*.scss", gulp.parallel(plain_css, min_css));
});

Then you can add it to you package.json compile-sass in the scripts section as below:

{
  "version": "1.0.0",
  "name": "test-project",
  "private": true,
  "scripts": {
    "compile-sass": "gulp sass"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "sass": "^1.58.3"
  }
}

Then you can either call npm run compile-sass from the command line of add it as a target in you project file as below:

  <!-- Make sure NPM is installed & restore packages before build -->
  <Target Name="EnsureNodeEnv" BeforeTargets="Build">
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(ProjectDir)" Command="npm install -s --no-audit" />
  </Target>
  <!-- Compile SASS to CSS -->
  <Target Name="GulpCompileSass" AfterTargets="EnsureNodeEnv">
    <Message Importance="high" Text="Compiling SASS, this may take several minutes..." />
    <Exec Command="npm run compile-sass -s" ContinueOnError="false">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Failed to compile SASS." />
  </Target>

sdpollack premium commented 9 months ago

Thanks, Kieran. I wish I had known this about a month ago. I'll try retrofitting my project to take out Webpack when I have the chance.


Kamila Pieńkowska staff answered 9 months ago


Some parts will be different but Installation and part of To Do App with MDB can be useful for you:

https://mdbootstrap.com/docs/standard/integrations/aspnet/


Kamila Pieńkowska staff answered 9 months ago


Here is another tutorial explaining sass bundling and package imports: https://mdbootstrap.com/learn/mdb-foundations/mdb-advanced-features/sass-scss/

And here is a tutorial that can help you with webpack configuration: https://mdbootstrap.com/docs/standard/getting-started/webpack-integration/


sdpollack premium commented 9 months ago

Thank you, but this is only partially helpful.

I have figured out how to generate the css from scss file in a separate mdb-webpack-starter-master project (which by the way has two separate source files folders and multiple css and js folders with the minimized files, so it is pretty confusing to work with.)

What I still haven't figured out is how to integrate this into the project I'd developing that uses MDB. It is a ASP.NET Razor pages project and the MDB files are in a \wwwroot\lib\mdb folder. I'm going to add a src folder under that and see if I can make it work, but none of the documents provide much guidance on how to do this. I would normally use npm, but I'm not sure how that will interact with my main package.json file.

So, what I'm looking for as a tutorial about how to include the mdb source into an existing project.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.3.1
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes
Tags