Webpack loader to convert the output of the css-loader back to a string
npm install css-to-string-loader
A simple webpack loader to convert the output of the css-loader back to a string.
This is quite useful for situations where you want webpack to process all of your @import and url() statements in your stylesheets but still receive the styles in string format for further use in your code base.
``
npm install css-to-string-loader --save-dev
` javascript`
var styleString = require('css-to-string-loader!css-loader!./file.css');
javascript
{
...
module: {
loaders: [
{ test: /\.css$/, loader: 'css-to-string-loader!css-loader' }
]
}
}
`
Angular 2 Component Styling
This loader was originally created to be used with Angular 2 component styling. The styles array in the component decorator expects an array of strings and the css-loader outputs its own custom array object. A common solution was to use the raw-loader to take CSS files or the output of sass-loader and convert it to a string. These solutions did not allow for processing of nested resources such as images and font files with minification, cache-busting hashes, or inlining with the url-loader.
javascript
// Angular 2 Component@Component({
...
styles: [require('./component.scss')],
...
})
// Webpack Config
{
module: {
loaders: [
{ test: /\.scss/, loader: 'css-to-string-loader!css-loader!sass-loader'}
]
}
}
`.toString()
It is also possible to achieve the same result as this loader by calling the custom