Loaders

Topic: Loaders

roshanpr pro asked 6 years 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; }

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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 commented 6 years 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' }) ] };

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

Please insert min. 15 characters.

roshanpr pro commented 6 years ago

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

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

roshanpr

Pro User 81Support score
19Questions 6Answers 0Snippets