wp_enqueue_script includes plugin directory too soon in filepath - css

Question

public function setup(){
//...
add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
}
function register_plugin_styles(){
wp_register_style( 'dontwaste', JSC_DONT_WASTE . '/styles/dontwaste_styles.css' );
wp_enqueue_style( 'dontwaste', false, null, null );
}
The JSC_DONT_WASTE is the path to the plugin directory, so JSC_DONT_WASTE . '/styles/dontwaste_styles.css' returns the following:
/Applications/AMPPS/www/wpplugin/wp-content/plugins/dontwaste/styles/dontwaste_styles.css
and this is exactly the path I need to reach my css file.
But the code above returns this NOT FOUND error:
http://127.0.0.1/wpplugin/Applications/AMPPS/www/wpplugin/wp-content/plugins/dontwaste/styles/dontwaste_styles.css?ver=4.6.1 404 (Not Found)
You'll notice in the beginning there's a /wpplugin/ (the name of the plugin folder) right after the localhost. How do I get rid of that and get the path to work?
There's also the version number which even though I've set to NULL it still sets a version number.

Answer 1

Yes, that makes sense.
Javascript and CSS assets are loaded using their URI (or URL) and not path on the server directories. As they're loaded on the frontend side. So it'll be something like yoursite.com/wp-content/plugins/your-plugin/js/your-asset.js
So you can't use :
plugin_dir_path( __FILE__ )
You must use :
plugin_dir_url( __FILE__ )
The first one is for files loaded in your plugin files (server side). Like a require_once. And the second one if for assets loaded on the user side.
Therefore, you can do something like :
// For the files called in your php :
if ( ! defined( 'PLUGIN_DIR' ) ) {
define( 'PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
}
// For the assets files loaded on the client side :
if ( ! defined( 'PLUGIN_ASSETS_URL' ) ) {
define( 'PLUGIN_ASSETS_URL', plugin_dir_url( __FILE__ ).'/assets' );
}