Bpmnlint-loader not processing bpmn-js-bpmnlint.css

Developers Modeler
#1

Hi,

I’ve been trying to use BPMNLint for my modeller, but it seems like the loader won’t process on the bpmn-js-bpmnlint.css so it’s unable to use it. I get this Error:

ERROR in ./node_modules/bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
.bjsl-overlay {
| z-index: 500;
| }
@ ./app/app.js 11:0-63
@ multi ./app/app.js
i ｢wdm｣: Failed to compile.

The loader is in my webpack.config.js and the installation “npm i bpmnlint-loader -D” seems to work.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    bundle: ['./app/app.js']
  },
  output: {
    path: __dirname + '/public',
    filename: 'app.js'
  },
  module: {
    rules: [
        {test: /\.bpmn$/, use: 'raw-loader'},
        {test: /\.bpmnlintrc$/,
          use: [
            {
              loader: 'bpmnlint-loader',
            }
          ]
        }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'assets/**', to: 'vendor/bpmn-js', context: 'node_modules/bpmn-js/dist/' },
      { from: '**/*.{html,css}', context: 'app/' }
    ])
  ],
  mode: 'development',
  devtool: 'source-map',

}

Do I miss out on something before using the loader?

#2

Are you importing the bpmn-js-bpmnlint.css styles in your to-be-bundled code? If that’s the case, you will need to include a style loader (e.g. css-loader) to make it work.