Flatpickr Includes

[amathieson]

An issue I have faced for a little while was to do with compiling with Flatpickr, I don't know if I am alone with this issue, but the way I solved it was to edit components/picker/_ui-picker.scss to make the @use paths relative

[elf-mouse]

Hi @winer222 , Dart Sass can load plain old .css files (about flatpickr).

If you're working on a project built independently with webpack, it might have something to do with the sass-loader's includePaths option

[amathieson]

Hi @elf-mouse thanks for the reply, this project does use webpack / laravel mix. I am not super familiar with sass-loader's configurations, below is my webpack.mix.js file. if you could point me in the right direction that would be very appreciated.
Thanks again,
Adam Mathieson

// webpack.mix.js

let mix = require('laravel-mix');


mix
    .js('src/app.js', 'dist/app.js').js('src/login.js', 'dist/login.js').vue()
    .sass('src/app.scss', 'dist/app.css').sass('src/login.scss', 'dist/login.css').setResourceRoot('/').setPublicPath('')
    .extract(['leaflet','vue','vue-router','balm-ui']);
mix.version();
mix.browserSync('127.0.0.1:80');
// mix.browserSync({});

if (mix.inProduction()) {
    mix.then(() => {
        const convertToFileHash = require("laravel-mix-make-file-hash");
        convertToFileHash({
            publicPath: "",
            manifestFilePath: "mix-manifest.json"
        });
    });
}

[SparK-Cruz]

I'm on vue3 and the use of flatpickr also bit me
SassError: Can't find stylesheet to import.

[elf-mouse]

Hi @winer222 @SparK-Cruz , I've verified that it's because the sass-loader in a manual project doesn't have a webpack-like resolve.modules by default configuration.

So, we need to configure it manually, like this:

• webpack.mix.js

  const mix = require("laravel-mix");
  
  mix.webpackConfig({
      resolve: {
          alias: {
              vue: "vue/dist/vue.esm-bundler.js",
              "balm-ui-plus": "balm-ui/dist/balm-ui-plus.esm.js",
              "balm-ui-css": "balm-ui/dist/balm-ui.css",
          },
      },
  });
  
  mix.sass("resources/css/app.scss", "public/css", {
      sassOptions: {
          includePaths: ["node_modules"],
      },
  })
      .js("resources/js/app.js", "public/js")
      .vue();

• resources/js/app.js

  import { createApp } from "vue";
  import App from "./App.vue";
  
  import BalmUI from "balm-ui";
  import BalmUIPlus from "balm-ui-plus";
  // import "balm-ui-css";
  
  const app = createApp(App);
  
  app.use(BalmUI);
  app.use(BalmUIPlus);
  
  app.mount("#app");

• resources/css/app.scss

  @use "@material/theme/variables" with (
      $primary: red
  );
  
  @use "balm-ui/dist/balm-ui";

Have a great weekend! Thanks again :)

[amathieson]

Thanks for the reply and the pointers in the right direction! Your patch worked perfectly! (I have also started supporting the project on Patreon to show my appreciation for your work ;) )

[elf-mouse]

@winer222 , Thank you very much for supporting BalmUI. I will always sync with Google MDC to restore and extend Material Design for vue as much as possible.