Load Angular component styleUrl using web pack

The only change you have to make on your component is , instead of providing the url path using styleUrl , import the file using require and convert to string.


To get the require keyword in typescript, you have to install an npm package called ‘@types/node’
npm install @types/node --save-dev

Also if you want to build and load the scss make sure that you have installed sass-loader and style-loader for web pack

npm install sass-loader --save-dev
npm install style-loader --save-dev

Plugins for webpack

npm install mini-css-extract-plugin --save-dev

webpack-config

rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'exports-loader?module.exports.toString()',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
]
}]


plugins: [

new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({

filename: '[name].styles.css',
chunkFilename: '[name].styles.css'
})
]