The instructions provided are quite unconventional. It is unnecessary to explicitly include the <script> tag, as webpack automatically handles script loading by bundling it for you.
In terms of styling with css, webpack can also manage this process. Initially, you must install the appropriate loaders to load the css file and apply styles to the DOM:
npm install --save style-loader raw-loader
Subsequently, in your TypeScript files, you can use:
import 'style!raw!../node_modules/ng2-toastr/ng2-toastr.css'
(please note that the relative path to your ../node_modules may vary based on the nesting level within your application).
The prefixes style! and raw! instruct webpack to process the specified script through "loaders".
The raw loader simply reads the css file without any additional processing (the css! loader can be used for extra functionalities like @import from the .css file, but it is not required here, hence using the raw loader is the simplest option.
The style loader applies the css content loaded by the raw loader to the current page's DOM programmatically. While it does not generate a <style> tag with src="url....", it ensures that the loaded css styles are applied on the page.
If this task recurs frequently, consider adding the loader configuration to your webpack.config.js:
module: {
loaders: [
{test: /\.tsx?$/, loader: 'ts-loader'},
{test: /\.css$/, loader:'style!raw'}
]
}
Following this setup, you can easily import the css file like so:
import '../node_modules/ng2-toastr/ng2-toastr.css'