These are chat archives for reactioncommerce/reaction

11th
Sep 2016
3Maestros
@3Maestros
Sep 11 2016 04:54
I am trying to import a css from /public/custom to a JS file but it unable to locate the file, do you see anything wrong in the statement . This import is done in the JS file in imports/plugin/included/shipping
import "custom/css/ion.rangeSlider.or.css";
3Maestros
@3Maestros
Sep 11 2016 05:01
Unable to resolve some modules:

  "custom/css/ion.rangeSlider.or.css" in
/Users/Aquaboi/git/meru/imports/plugins/included/shipping/client/templates/shipping.js
(web.browser)
3Maestros
@3Maestros
Sep 11 2016 05:47
My css is at location
/Users/Aquaboi/git/meru/public/custom/css/ion.rangeSlider.or.css
I dont think I need to include "public" in the import correct?
I now have tried to import this way
@import "{}/custom/css/ion.rangeSlider.or.css";
but I get error saying
While building for web.browser:
   imports/plugins/included/shipping/client/templates/shipping.js:10:1:
   Unexpected token (10:1)
Which I believe is for "@" in import
3Maestros
@3Maestros
Sep 11 2016 06:09
my question "Is it okay to import custom from JS file "imports/plugins/included/shipping/client/templates/shipping.js"?
Jeremy Shimko
@jshimko
Sep 11 2016 14:50

There are several examples in that link I sent you. (I was on my phone, so I couldn't write a more thorough answer).
You don’t need to put it in the public folder. That’s for when you want to make it available as a static asset like: http://example.com/css/my.css
You just want to import it and that can happen from anywhere in the app - including the same folder as your js file that imports it. If you’re in a js file, it’s just:

import “../../relative/path/to/your/file.css"

Or if it’s in the same folder:

import "./style.css";
It also looks like you’re editing imports/plugins/included/shipping/client/templates/shipping.js. Are you? You shouldn’t be. ;)
You can literally import that from anywhere, so you shouldn’t be editing core files. If you do, the next time you try to update Reaction will be much more difficult.
You should create your own plugin to add code to Reaction
https://docs.reactioncommerce.com/reaction-docs/master/creating-a-plugin
3Maestros
@3Maestros
Sep 11 2016 16:55
thanks @jshimko , yes it will be a issue when we upgrade next time, but it is minor change I need to make and I felt creating a plugin package just for this may not be worth it.
Jeremy Shimko
@jshimko
Sep 11 2016 17:45
Creating a plugin with two files is probably less work than resolving git merge conflicts, but hey, that’s just me. ;)
mkdir -p ./imports/plugins/custom/my-plugin/client

touch ./imports/plugins/custom/my-plugin/client/styles.css
touch ./imports/plugins/custom/my-plugin/client/index.js

# add to index.js
import "./styles.css";
That’s literally it. Done.
Jeremy Shimko
@jshimko
Sep 11 2016 17:53
And then any custom code you need for the app can be added to that plugin and you’ll never have to deal with a single merge conlict.