Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Error tabs on webpack encore

jorge.alemangonzalez free asked 5 years ago


Hello, I just purchased MDB pro and I am facing some issues with the "Material tabs" component.

The styles of the header table links is not working, neither the links itselves. The hide / show behaviour is not working. Rendered element

I am using Symfony with webpack encore and this is my configuration:

webpack.config.js:

var Encore = require('@symfony/webpack-encore');

//yarn add copy-webpack-plugin --dev
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build')
// the public path used by the web server to access the previous directory

.setPublicPath('/build')

//.addStyleEntry('css/app', './assets/css/app.scss')
.addEntry('app', './assets/js/app.js')

.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())

// uncomment to define the assets of the project


// uncomment if you use Sass/SCSS files
.enableSassLoader(function(options) {
    options.includePaths = ['node_modules']
})
.addPlugin(new CopyWebpackPlugin([
    // copies to {output}/static
    { from: './assets/js', to: 'js', ignore: 'app.js'},
    { from: './assets/img', to: 'img' }
]))

// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()

module.exports = Encore.getWebpackConfig();

app.scss:

@import "~mdbootstrap-pro/scss/mdb";

The content of the html is exactly what I found in this link


jorge.alemangonzalez free commented 5 years ago

UPDATE:

If I add the following line to app.scss the styles are fixed but not the show / hide functionality.

@import "~mdbootstrap-pro/css/bootstrap.css";


jorge.alemangonzalez free commented 5 years ago

It seems like I need to do all the configuration described in https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/

But I do not know how to make that configuration through Encore ( The code snippet that I wrote above )



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: MSI
  • Browser: Chrome
  • OS: Ubuntu18
  • Provided sample code: No
  • Provided link: Yes
Tags