1

I am unable to import blueprint.js css files using @import in a css file using esbuild - no webpack.

@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

I receieve the following errors.

Error: Build failed with 3 errors:

src/style.css:2:8: error: Could not resolve "~normalize.css" (mark it as external to exclude it from the bundle)

src/style.css:3:8: error: Could not resolve "~@blueprintjs/core/lib/css/blueprint.css" (mark it as external to exclude it from the bundle)

src/style.css:4:8: error: Could not resolve "~@blueprintjs/icons/lib/css/blueprint-icons.css" (mark it as external to exclude it from the bundle)

My Builder.js File

const { start } = require('live-server')
const { watch } = require('chokidar')
const { build } = require('esbuild')
const fs = require('fs-extra')

const isDev = process.env.NODE_ENV !== 'production'

/**
 * Live Server Params
 * @link https://www.npmjs.com/package/live-server#usage-from-node
 */
const serverParams = {
  port: 8000, // Set the server port. Defaults to 8080.
  root: 'dist', // Set root directory that's being served. Defaults to cwd.
  open: true // When false, it won't load your browser by default.
  // host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
  // ignore: 'scss,my/templates', // comma-separated string for paths to ignore
  // file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
  // wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
  // mount: [['/components', './node_modules']], // Mount a directory to a route.
  // logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
  // middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
}

/**
 * ESBuild Params
 * @link https://esbuild.github.io/api/#build-api
 */
const buildParams = {
  color: true,
  entryPoints: ['src/index.jsx'],
  loader: { '.js': 'jsx' },
  outdir: 'dist',
  minify: !isDev,
  format: 'cjs',
  bundle: true,
  sourcemap: true,
  logLevel: 'error',
  incremental: true
}
;(async () => {
  fs.removeSync('dist')
  fs.copySync('public', 'dist')
  const builder = await build(buildParams)

  if (isDev) {
    watch('src/**/*', { ignoreInitial: true }).on('all', () => {
      builder.rebuild()
    })

    start(serverParams)
  } else {
    process.exit(0)
  }
})()
JJWALLACE
  • 51
  • 9

1 Answers1

0

Just remove the ~ prefix in path:

@import "normalize.css/normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";

BTW, the path for normalize.css should be normalize.css/normalize.css

JUO
  • 626
  • 1
  • 7
  • 19