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.
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
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
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 )