css-to-string-loader
Webpack loader to convert the output of the css-loader back to a string
Last updated 4 years ago by smithad15 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install css-to-string-loader 
SYNC missed versions from official npm registry.

css-to-string-loader for webpack

NPM

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.

Install

npm install css-to-string-loader --save-dev

Usage

General webpack loader usage

Require Statement

var styleString = require('css-to-string-loader!css-loader!./file.css');

Webpack Config

{
  ...
  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.

// 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 .toString() method implementation on the returned value of the css-loader. In fact, that is really all this loader does for you. However, by adding this into your loader chain, you don't have to worry about having to write it every time.

License

MIT (http://www.opensource.org/licenses/mit-license.php)

Current Tags

  • 0.1.3                                ...           latest (3 years ago)

4 Versions

  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 3
This Week 12
This Month 41
Last Day 2
Last Week 29
Last Month 111
Dependencies (1)
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |