carlosarli
Configure datepicker-moment with Brunch
Hello everyone,
I’m trying to add the package datepicker-moment to my phoenix application but can’t seem to solve some configuration issues. I installed it via npm then went to brunch.config and in the npm section I whitelisted datepicker-moment. I would like to add the stylesheet too but when I add it to styles it throws an error as i already have another style there. So first question howdo you add multiple styles in the npm section of brunch config? Is that all I have to do to set up an npm package? I then went to app.js and wrote import datepicker from “datepicker-moment” but then in my views it says that .datepicker is not a function while jquery and everythin else works so I’m guessing I am not importing it right…
Thank you for your help
Carlo
Marked As Solved
peerreynders
If you have a look at the package.json you’ll find.
"main": "Gruntfile.js",
https://docs.npmjs.com/files/package.json#main
The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require(“foo”), then your main module’s exports object will be returned.
This should be a module ID relative to the root of your package folder.
For most modules, it makes the most sense to have a main script and often not much else.
Gruntfile.js is a taskrunner configuration file. As far as I can tell that package is not suitable for bundling by Brunch or any other bundler (FYI: Phoenix is moving to Webpack 4).
This problem happens frequently with older JavaScript libraries that are barely being maintained (another example).
Also Liked
peerreynders
Nope. But somebody else may know of one that can be properly required (or imported; which is the fundamental issue).
For some background you may be interested in Modern JavaScript Explained For Dinosaurs (no insult intended, I didn’t pick the title).
dokuzbir
for font-awesome and glyphicons you need copy cat
npm install --save-dev copycat-brunch
This is for bootstrap sass you can configure if you dont use bootstrap-sass
plugins: {
copycat: {
"fonts": [ "node_modules/bootstrap-sass/assets/fonts/bootstrap"]
}
}
peerreynders
I ran into that - in my case Phoenix distribution didn’t include glyphicons-halflings-regular - i.e. bootstrap is incomplete.
There needs to be a static/fonts folder with:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
The app.css file has the bootstrap CSS baked in which references these fonts.
“eonasdan-bootstrap-datetimepicker”: [‘build/bootstrap-datetimepicker.min.css’],doesn’t look like a path undernode_modules(hence the name of the configuration:npm)
You’d have to look at modifying
stylesheets: {
joinTo: "css/app.css"
},
instead.
The joinTo supports a variety of pattern matching styles.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








