Loaders

roshanpr asked 5 months ago

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; }


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 commented 5 months 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'
})
]
};


roshanpr commented 5 months ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No