Sign in


Sign up


Loaders

roshanpr Pro User asked 2 weeks ago in MDB pro, version:4.2.0

Hi there,New to this. I am trying to set up mdbreact on an existing project. Are there any set of loaders that need to be added. Below is the error message.
@ ./src/index.js 3:0-47
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
ERROR in ./node_modules/mdbreact/dist/css/mdb.css
Module parse failed: Unexpected token (27:0)
You may need an appropriate loader to handle this file type.
|  *
|  */
| .mdb-color.lighten-5 {
|   background-color: #d0d6e2 !important; }

1 Answers
Jakub Strebeyko answered 1 week ago

Hi there roshanpr,

Welcome to the Support Board! All you really need to get started with MDB in an existent project is included here, starting from the second point of Step 2. How is your webpack.config.js dealing with CSS files at the moment?

With Best Regards,
Kuba

roshanpr Pro User replied 1 week ago

Hey Kuba, do you have any templates for a landing page (with react components)?

roshanpr Pro User replied 1 week ago

Hi Kuba, thanks for your response. Yep, I started from the same link and managed to get through. I want to avoid writing CSS as much as possible. So far, am able to accomplish a lot through your react components. Below is the webpack config.

const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports = {
entry: { app: ‘./src/index.js’ },
output: {
path: path.resolve(__dirname),
filename: ‘[name]-bundle.js’
},
module: {
rules: [
{
test: /.js$/,
include: path.resolve(__dirname, ‘src’),
use: [‘babel-loader’]
},
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’]},
{ test: /.eot(?v=d+.d+.d+)?$/, loader: ‘file-loader’},
{ test: /.(woff|woff2)$/, loader: ‘url-loader?prefix=font/&limit=5000’ },
{ test: /.ttf(?v=d+.d+.d+)?$/, loader: ‘url-loader?limit=10000&mimetype=application/octet-stream’ },
{ test: /.svg(?v=d+.d+.d+)?$/, loader: ‘url-loader?limit=10000&mimetype=image/svg+xml’ },
{ test: /.png(?v=d+.d+.d+)?$/, loader: ‘url-loader?limit=10000&mimetype=image/png’ },
{ test: /.gif(?v=d+.d+.d+)?$/, loader: ‘url-loader?limit=10000&mimetype=image/gif’ }
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: ‘public/index.html’
})
]
};